

フロントエンド初心者です。

nextjs(v13.4.13)で、Firebaseにデータを保存したいですが、うまくいきません。  
まず、Firebaseへの接続は完了できているので、API_KEYなどは正しく設定できているはずです。(理由は後述します。)

以下に各コードで何をしているかを説明します。

  1. app/_gateway/firebase_config.ts  
ここでは、firebaseとの接続のための設定をしています。

[code]

    import { initializeApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
    
    const firebaseConfig = {
      apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
      projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
      storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.REACT_APP_FIREBASE_APP_ID,
      measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
    };
    
    const app = initializeApp(firebaseConfig);
    const firestore = getFirestore(app);
    
    export {firestore};
    
    
[/code]

  2. app/_gateway/firestore.ts  
ここでは、firestoreにデータを保存するためのメソッドsaveToFireStoreを作成しています。

[code]

    import { doc, setDoc } from "firebase/firestore";
    import { firestore } from "./firebase_config";
    
    const saveToFirestore = async (collection: string, document: string, saveData: any) => {
      await setDoc(doc(firestore, collection, document), saveData);
    };
    
    export { saveToFirestore };
    
    
[/code]

  3. app/_hooks/SaveMeshi.ts  
ここでは、今までに行ったことのあるご飯屋の情報をsaveToFirestoreメソッドを使ってfirestoreに保存するためのSaveMeshiメソッドを作成しています。

[code]

    import { saveToFirestore } from "../_gateway/firestore";
    
    type MeshiInfo = {
      meshiPlace: string;
      meshiDescription: string;
    };
    
    const SaveMeshi = (groupUID: string, meshiInfo: MeshiInfo) => {
      saveToFirestore("meshi", groupUID, meshiInfo);
    };
    
    export { SaveMeshi };
    
    
[/code]

  4. app/new_meshi/page.tsx  
ここでは、画面からSaveMeshiメソッドを呼び出して、フォームに入力されたデータを保存しようとしています。  
もし、`const [meshiDescription, setMeshiDescription] =
useState("");`の一行下に`SaveMeshi('test', { meshiPlace: meshiPlace,
meshiDescription: meshiDescription
}`を書いて、レンダリング時に呼び出すと、うまくfirestoreに保存されますが(なので接続自体はできています)、以下のコードのようにbuttonのonClickから呼び出すと保存されません。

[code]

    'use client'
    
    import { useState } from "react";
    import { TextForm } from "../_components/index";
    import { SaveMeshi } from "../_hooks/SaveMeshi";
    
    const NewMeshi = () => {
      const [meshiPlace, setMeshiPlace] = useState("");
      const [meshiDescription, setMeshiDescription] = useState("");
    
      return (
        <>
          <h1>新規飯登録</h1>
          <TextForm setValue={setMeshiPlace} placeholder='どこで食べた？' />
          <TextForm setValue={setMeshiDescription} placeholder='どんな感じのご飯だった？' />
          <button type='button' onClick={() => SaveMeshi('test', { meshiPlace: meshiPlace, meshiDescription: meshiDescription })}>登録</button>
        </>
      );
    };
    
    export default NewMeshi;
    
    
[/code]

try catchでエラーが発生しているか確認をしましたが例外は発生していないようです。  
ただ、気になる点としては、ブラウザのネットワークタブを見てみると、ボタンでも、レンダリング時でも、何度もfirebaseにリクエストを送ってしまっているようです。  
そのレスポンスが、403エラーで`"Permission denied: Consumer 'project:undefined' has been
suspended`となっています。  
ボタンでもレンダリング時でも一応saveToFirestoreメソッドは発火しているようで、確認しましたが正しくdescriptionなどのstate情報もsaveToFirestoreメソッドまで渡っています。(なのにボタンの時だけ保存できない…)

permissionなので、ログイン関連なのだろうという見解ですが、よくわかっていません。  
ご協力お願いします、、、。


CC BY-SA 4.0
2023-08-13T09:12:29.007
95931
2023-08-13T14:40:09.723
2023-08-13T09:33:07.573
59458
59458
question
typescript firebase next.js
NextJS Firebaseにデータを保存したい。


自己解決しました、閲覧していただいた方、ありがとうございました。

なんと、firebaseのconfigのprojectIDがうまく設定できていませんでした。

NextJSでは、環境変数を、NEXT_APP_~~~~で設定しないといけないのですね。


CC BY-SA 4.0
2023-08-13T12:45:56.447
95933
2023-08-13T14:40:09.723
2023-08-13T14:40:09.723
3060
59458
95931
answer