避免 Firebase 出现 Cannot read property 'apps' 重复结果

Question

我正在尝试在 TypeScript/NextJS 项目中使用 Firebase，但未能成功使其正常工作。我可以导入它并初始化应用程序：

import * as firebase from "firebase/app";
import { collection, getDocs } from "firebase/firestore";

const firebaseConfig= ({
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
});

firebase.initializeApp(firebaseConfig);

但是，当我重新加载页面时，我收到此错误：

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

为了缓解这个问题，我更换了，

firebase.initializeApp(firebaseConfig);

和

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
 } else {
    firebase.app();
 }

但现在我得到了错误TypeError: Cannot read property 'length' of undefined。

智能感知上apps说Property 'apps' does not exist on type，但我不知道如何处理这些信息。任何帮助表示赞赏。

Answer 1

在版本 9 中，您应该可以使用getApps以下方法进行测试：

import { getApps, initializeApp } from "firebase/app"

if (!getApps().length) initializeApp(firebaseConfig)

https://firebase.google.com/docs/reference/js/v9/app.md#getapps