フロントエンド初心者です。
nextjs(v13.4.13)で、Firebaseにデータを保存したいですが、うまくいきません。
まず、Firebaseへの接続は完了できているので、API_KEYなどは正しく設定できているはずです。(理由は後述します。)
以下に各コードで何をしているかを説明します。
- app/_gateway/firebase_config.ts
ここでは、firebaseとの接続のための設定をしています。
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};
- app/_gateway/firestore.ts
ここでは、firestoreにデータを保存するためのメソッドsaveToFireStoreを作成しています。
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 };
- app/_hooks/SaveMeshi.ts
ここでは、今までに行ったことのあるご飯屋の情報をsaveToFirestoreメソッドを使ってfirestoreに保存するためのSaveMeshiメソッドを作成しています。
import { saveToFirestore } from "../_gateway/firestore";
type MeshiInfo = {
meshiPlace: string;
meshiDescription: string;
};
const SaveMeshi = (groupUID: string, meshiInfo: MeshiInfo) => {
saveToFirestore("meshi", groupUID, meshiInfo);
};
export { SaveMeshi };
- app/new_meshi/page.tsx
ここでは、画面からSaveMeshiメソッドを呼び出して、フォームに入力されたデータを保存しようとしています。
もし、const [meshiDescription, setMeshiDescription] = useState("");
の一行下にSaveMeshi('test', { meshiPlace: meshiPlace, meshiDescription: meshiDescription }
を書いて、レンダリング時に呼び出すと、うまくfirestoreに保存されますが(なので接続自体はできています)、以下のコードのようにbuttonのonClickから呼び出すと保存されません。
'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;
try catchでエラーが発生しているか確認をしましたが例外は発生していないようです。
ただ、気になる点としては、ブラウザのネットワークタブを見てみると、ボタンでも、レンダリング時でも、何度もfirebaseにリクエストを送ってしまっているようです。
そのレスポンスが、403エラーで"Permission denied: Consumer 'project:undefined' has been suspended
となっています。
ボタンでもレンダリング時でも一応saveToFirestoreメソッドは発火しているようで、確認しましたが正しくdescriptionなどのstate情報もsaveToFirestoreメソッドまで渡っています。(なのにボタンの時だけ保存できない…)
permissionなので、ログイン関連なのだろうという見解ですが、よくわかっていません。
ご協力お願いします、、、。