Firebase9.0.2初始化报Cannot read 'apps' of undefined错误求助

报错原因 #

你使用的是Firebase 9.0.2版本，该版本默认采用模块化的ESM API设计，废弃了v8及更早版本的命名空间式导入用法，你当前的导入逻辑没有适配v9的规则，导致导入的firebase对象为undefined，访问firebase.apps属性时触发报错。

解决方案 #

方案1：使用兼容模式快速修复（无需修改原有初始化逻辑） #

直接修改导入语句，引入带compat后缀的兼容包，即可复用原有v8风格的代码：

import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
import 'firebase/compat/storage'
import 'firebase/compat/analytics'
import 'firebase/compat/performance'

修改导入代码后，原有的初始化代码无需改动即可正常运行。

方案2：适配v9原生模块化API（推荐，包体积更小） #

Firebase v9的模块化API支持tree shaking，打包后体积会比兼容模式小30%以上，适合新项目或者愿意调整代码的场景，修改方式如下：

1. 替换导入逻辑：

import { initializeApp, getApps } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'
import { getAnalytics, isSupported } from 'firebase/analytics'
import { getPerformance } from 'firebase/performance'

2. 调整初始化代码：

export default function initFirebase() {
    if(!getApps().length){
        const app = initializeApp(clientCredentials)
        if(typeof window !=='undefined'){
            if('measurementId' in clientCredentials){
                // 校验浏览器是否支持analytics，避免SSR场景报错
                isSupported().then(supported => {
                    if(supported) {
                        getAnalytics(app)
                        getPerformance(app)
                    }
                })
            }
        }
        console.log('firebase was successfully init')
        return app
    }
}

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