NuxtJS集成Firebase时报Cannot read property 'apps' of undefined如何解决

1. 确认版本兼容性 #

该报错90%以上的场景是@nuxtjs/firebase和firebase核心包版本不匹配导致的API不兼容：

• 先卸载现有包：
  npm uninstall firebase @nuxtjs/firebase
• 按照适配版本重新安装：
  • Nuxt 2 环境推荐使用稳定适配组合：npm install firebase@8.10.0 @nuxtjs/firebase@7.6.1
  • Nuxt 3 环境不要使用@nuxtjs/firebase，直接手动集成Firebase v9+模块化API即可

2. 修正nuxt.config.js配置 #

你当前的配置大概率存在格式错误，你的配置截图如下：

不要将Firebase配置直接写到modules数组内，正确的配置结构如下：

export default {
  // 模块声明仅引入@nuxtjs/firebase即可
  modules: [
    '@nuxtjs/firebase'
  ],
  // 单独新增顶层firebase配置项存放配置
  firebase: {
    config: {
      // 替换为你自己的Firebase项目配置
      apiKey: "<API_KEY>",
      authDomain: "<AUTH_DOMAIN>",
      projectId: "<PROJECT_ID>",
      storageBucket: "<STORAGE_BUCKET>",
      messagingSenderId: "<MESSAGING_SENDER_ID>",
      appId: "<APP_ID>"
    },
    // 按需开启你要使用的Firebase服务
    services: {
      auth: true,
      firestore: true,
      storage: true
    }
  }
}

3. 调整Firebase调用写法 #

如果你使用的是Firebase v9+ 模块化版本，不要使用旧版本的命名空间式写法：

• 废弃写法：if (!firebase.apps.length) { firebase.initializeApp(config) }
• 替换为新API写法：

import { getApps, initializeApp } from 'firebase/app'
if (!getApps().length) {
  initializeApp(firebaseConfig)
}

4. 清理缓存重启服务 #

修改完成后执行npm run clean或者手动删除.nuxt文件夹，再重启开发服务，避免缓存导致配置不生效。

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