避免 Firebase 重复导致无法读取属性“应用程序”答案

【问题标题】：Avoiding Firebase duplicate results in Cannot read property 'apps'避免 Firebase 重复导致无法读取属性“应用程序”
【发布时间】：2021-08-07 03:03:40
【问题描述】：

我正在尝试在 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 上的 Intellisense 显示 Property 'apps' does not exist on type，但我不知道如何处理这些信息。任何帮助表示赞赏。

【问题讨论】：

您使用的是什么版本的 Firebase SDK？如果您以前从未这样做过，您应该可以通过查看 package.json 中的依赖项来找到它。
我似乎在使用 9.0.0-beta.1。我应该更改为其他版本吗？
您使用的语法适用于 8.x 和更早版本的 Firebase SDK，因此我建议使用这些语法。版本 9 引入了完全不同的模块化语法 - 如@jnpdx 的回答所示。

标签： typescript firebase next.js

【解决方案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

【讨论】：

const firebaseApp = !getApps().length ? initializeApp(firebaseConfig) : getApp();

【解决方案2】：

您使用的语法适用于 Firebase SDK 的 8.x 和更早版本，因此我建议您使用这些语法。版本 9 引入了完全不同的模块化语法 - 如 @jnpdx 的 answer 所示。

【讨论】：

太棒了，我会这么做的。非常感谢您的澄清！