next.jsでfirebaseの初期化エラー対策

next.jsでfirebaseの初期化が2度呼ばれてしまう症状にでくわしたため対策をしました。

next.jsでfirebaseの初期化

let firebaseApp: FirebaseApp;

if (!getApps().length) {
  initializeApp(firebaseConfig);
}

export { firebaseApp };

次のように書き換えました。

let firebaseApp: FirebaseApp | null = null;

// Firebaseを1回だけ初期化する。2回以上初期化しようとするとエラーとなる！
if (!getApps().length) {
  firebaseApp = initializeApp(firebaseConfig);
}

// この関数が2回目以降に呼び出されても、firebaseAppの初期化された値は維持される
export function getInitializedApp(): FirebaseApp {
  if (!firebaseApp) {
    throw new Error("Firebase app has not been initialized.");
  }
  return firebaseApp;
}

使い方はこうです。

  const firebaseApp = getInitializedApp();
  const storage = getStorage(firebaseApp);

firebaseの初期化エラー

Firebase: Firebase App named ‘[DEFAULT]’ already exists (app/duplicate-app).

Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

firebase.initializeAppが複数回呼ばれているらしい。

firebaseのその他のエラー

{code: “auth/invalid-credential”, message: “Error getting request token: 401 {“errors”:[{“code…://XXX.firebaseapp.com/__/auth/handler”}

{code: "auth/invalid-credential", message: "Error getting request token: 401 {"errors":[{"code…://XXX.firebaseapp.com/__/auth/handler"}

apiキーの再生成をしていませんか？apiキーでコケています。

Authentication > ログイン方法 > ドメイン > 該当サービスの鉛筆の編集アイコン

apiキーを確認し、間違っていたら入れなおしましょう。

FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field

FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field

つまらない単純エラーです。未定義の値を格納しようとしているため、削るか値がちゃんと入るようにしましょう。object内のundefinedもダメです。”空はokです。

updateの場合も同様です。

FirebaseError: Function DocumentReference.update() called with invalid data. Unsupported field value: undefined (found in field

FirebaseError: Invalid Query. A non-empty array is required for ‘array-contains-any’ filters.

FirebaseError: Invalid Query. A non-empty array is required for ‘array-contains-any’ filters.

arrayが渡っていないとか。arrayじゃない場合はarray-containsでok。

TypeError: set is not a function

TypeError: set is not a function

ドキュメントID(.doc)などの指定を疑いましょう。

Firestore backend. Backend didn’t respond within 10 seconds.

@firebase/firestore: Firestore (7.14.3): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

ちょっと通信を絡む作業をしていたため、いったん全部そちらをコメントアウト→改善されませんでした。

vs codeを再起動→改善されませんでした。
pcの挙動も怪しく、たまたまmacも再起動したかったのでmacを再起動→改善されました。

深くは調べていないので、わかりませんが直近追加したプラグインなどもあれば疑ってもいいかもしれません。参考程度に。

This domain () is not authorized to…se console

Uncaught th {code: "auth/unauthorized-domain", message:
"This domain () is not authorized to…se console ->
Auth section -> Sign in method tab.",

firebaseにドメインを追加すれば解決ですね。

Authentification > ログイン方法 > ドメインを追加

Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field xxx)

Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field xxx)

うっかりりミスでした。vue側から引数が渡っておらず未定義でした。

JsonProtoSerializer.push../node_modules/@firebase/firestore/dist/…

JsonProtoSerializer.push../node_modules/@firebase/firestore/dist/index.cjs.js.JsonProtoSerializer.fromRpcStatus

firebaseが期限切れになるとエラーがでました。このほかの原因でもこのようなエラーがでるかもしれませんが、期限切れかもしれない場合は期限切れを疑ってみましょう。ルールの変更することにより改善されます。