Firebase 模块化 SDK V9.0.0+ 类型错误：无法读取未定义的 Firebase 的属性'apps'

Question

当尝试运行我的next.js应用程序时，我得到了这个错误。我尝试了很多方法，但我无法解决这个问题。我正在使用firebase 9.0.1

Server Error
TypeError: Cannot read property 'apps' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
.nextserverpages_app.js (14:13) @ Object../firebase.js
12 | };
13 |
> 14 | const app = !firebase.apps.length
|             ^
15 |   ? firebase.initializeApp(firebaseConfig)
16 |   : firebase.app();

这是我的firebase.js

import firebase from "firebase/app";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };

Answer 1

由于您使用的是新的模块化SDKv9.0.1，它不使用firebase.命名空间，您应该使用getApps()而不是firebase.apps。

import { initializeApp, getApps } from "firebase/app"
import { getFirestore } from "firebase/firestore"
import { getAuth } from "firebase/auth"
const firebaseConfig = {...}
if (!getApps().length) {
//....
}
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const auth = getAuth(app)
export {db, auth}

然而，你不需要检查Firebase是否已经在这个新的SDK中初始化。您可以在文档中了解更多关于新语法的信息。

也检查:Getting started with Firebase for web

Answer 2

if(!firebase)由于新的更新而给出错误。现在代码看起来像这样

import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
const db = getFirestore();
export { addDoc, db, collection };

我建议你重新阅读firebase文档，它们是非常更新的，许多视频教程代码不工作。链接:https://firebase.google.com/docs/web/setuphttps://firebase.google.com/docs/build