Firebase连接时报TypeError: 无法读取undefined的length属性如何解决

报错信息如下：

错误产生原因 #

你使用的是Firebase 9及以上版本，代码中读取firebase.apps.length时抛出错误，是因为firebase.apps为undefined：

• 如果你用的是compat兼容模式，顶层导入的firebase对象结构发生了变更，apps属性不再直接挂载在导入的命名空间下
• 未导入Firestore、Auth对应服务的兼容包，也可能触发初始化逻辑异常

修复方案 #

方案1：适配compat兼容模式修改代码 #

首先安装所需的兼容依赖：
npm install firebase/compat/firestore firebase/compat/auth
然后修改firebase.js代码：

import * as firebase from "firebase/compat/app";
// 引入对应服务的兼容包
import "firebase/compat/firestore";
import "firebase/compat/auth";

const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
};

// 调整初始化判断逻辑
const app = !firebase.default.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.default.app();

const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

方案2：改用官方推荐的模块化API（无需兼容层，性能更优） #

直接使用Firebase 9+原生模块化写法，修改firebase.js代码如下：

import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "***",
  authDomain: "***",
  projectId: "***",
  storageBucket: "***",
  messagingSenderId: "***",
  appId: "***",
};

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

const db = getFirestore(app);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export { db, auth, provider };

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