Nuxt.js集成Firebase报Cannot read property 'apps' of undefined问题咨询

报错根因 #

该错误由Firebase版本不兼容导致：你当前使用的是Firebase v9及以上的模块化版本，该版本移除了旧版本中firebase/app的默认导出全局对象，你代码中firebaseModule.default取到的值为undefined，因此访问undefined.apps触发报错。 #

解决方案 #

方案1：快速兼容（无需修改业务代码） #

如果不想调整现有逻辑，直接安装带兼容层的Firebase版本即可：

• 卸载旧版本：npm uninstall firebase
• 安装兼容版本：npm install firebase@9-compat
• 重新启动项目，原有代码可直接正常运行。

方案2：适配Firebase v9+ 原生模块化API #

如果要利用新版API的tree-shaking能力降低打包体积，修改你的代码如下即可：

const { initializeApp, getApps, getApp } = await import(/* webpackChunkName: 'firebase-app' */'firebase/app')

let session
if (!getApps().length) {
  session = initializeApp(config)
} else {
  session = getApp()
}

return {
  session
}

方案3：使用@nuxtjs/firebase模块的适配方案 #

如果你是通过@nuxtjs/firebase第三方模块集成Firebase，请按版本匹配规则调整：

• v7.x及以下版本的@nuxtjs/firebase仅支持Firebase v8，需降级Firebase到v8版本：npm install firebase@8
• v8.x及以上版本的@nuxtjs/firebase支持Firebase v9+，需在nuxt.config.js中开启兼容配置：

// nuxt.config.js
export default {
  modules: ['@nuxtjs/firebase'],
  firebase: {
    useOnlyModule: true,
    config: {
      // 你的Firebase项目配置
    }
  }
}

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