Next.js使用Firebase报Cannot read property 'length' of undefined如何解决

核心原因 #

你安装的依赖是firebase@9.x版本，该版本采用了模块化的API设计，完全不兼容Firebase 8及更早版本的命名空间调用语法。你当前的配置文件使用的是v8版本的写法，读取firebase.apps时会返回undefined，调用length属性就会触发本次报错。同时你还缺少storage模块的导入定义，后续调用storage也会触发额外报错。 #

修复方案1：兼容模式（无需修改后续业务代码，适配v8写法） #

直接修改firebase配置文件的导入语句，使用v9版本提供的兼容包即可，完整代码如下：

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
// 补充storage的兼容导入
import "firebase/compat/storage";

const firebaseConfig = {
  apiKey: "AIzaSyD0Kz7iRs6WKSXO6Iw2hEeDFeRcDGERmV8",
  authDomain: "facebook-clone-1870b.firebaseapp.com",
  projectId: "facebook-clone-1870b",
  storageBucket: "facebook-clone-1870b.appspot.com",
  messagingSenderId: "924586129038",
  appId: "1:924586129038:web:1d4204813a4956bd353bdf"
};

const app = !firebase.apps.length
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();

const db = app.firestore();
const storage = firebase.storage();

export  {db,storage};

修复方案2：原生模块化写法（推荐，打包体积更小性能更好） #

完全适配Firebase 9的模块化API，修改配置文件如下：

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "AIzaSyD0Kz7iRs6WKSXO6Iw2hEeDFeRcDGERmV8",
  authDomain: "facebook-clone-1870b.firebaseapp.com",
  projectId: "facebook-clone-1870b",
  storageBucket: "facebook-clone-1870b.appspot.com",
  messagingSenderId: "924586129038",
  appId: "1:924586129038:web:1d4204813a4956bd353bdf"
};

const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore(app);
const storage = getStorage(app);

export { db, storage };

注意：采用原生v9写法后，后续调用Firestore、Storage的业务代码也需要同步改为模块化调用语法，不能再使用v8的链式调用写法。

内容的提问来源于stack exchange，提问作者Jeevan