部署Nuxt 2 SSR到Firebase时出现Service Firestore不可用错误

部署Nuxt 2 SSR到搭载Functions和Hosting的Firebase时，出现如下调试错误：

用户提供的firebase.js代码如下：

// import { initializeApp } from "firebase/app";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
require("firebase/compat/firestore");
var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

var fb = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export { fb,db };

排查与解决步骤 #

• 补全Firebase配置信息：确保firebaseConfig内的所有字段都填入Firebase项目的真实有效信息，不能留空，这是初始化失败的常见原因。
• 适配SSR环境的Firebase初始化逻辑：
  SSR场景下需避免重复初始化应用，建议将Firebase初始化放在Nuxt插件中，并添加存在性判断：

  // plugins/firebase.js
  import firebase from 'firebase/compat/app'
  import 'firebase/compat/auth'
  import 'firebase/compat/firestore'
  
  // 避免重复初始化
  if (!firebase.apps.length) {
    const firebaseConfig = {
      apiKey: "你的真实密钥",
      authDomain: "你的认证域名",
      // 其他完整配置项
    }
    firebase.initializeApp(firebaseConfig)
  }
  
  const db = firebase.firestore()
  const fb = firebase.app()
  
  export default ({ app }, inject) => {
    // 将实例注入到Vue上下文，方便组件调用
    inject('firebase', fb)
    inject('firestore', db)
  }
  

  然后在nuxt.config.js中注册插件：

  plugins: [
    // 若仅客户端使用，添加mode: 'client'；需SSR渲染则移除该配置
    { src: '~/plugins/firebase.js', mode: 'client' }
  ]
  

• 锁定依赖版本避免兼容性问题：确保firebase/compat系列依赖版本与Nuxt 2兼容，在package.json中指定具体版本，例如：

  "dependencies": {
    "firebase": "^9.23.0",
    // 其他项目依赖
  }
  

• 检查Firebase部署配置：
  确认firebase.json中Hosting和Functions的配置正确指向Nuxt SSR入口：

  {
    "hosting": {
      "public": "dist",
      "rewrites": [
        {
          "source": "**",
          "function": "ssr"
        }
      ]
    },
    "functions": {
      "source": ".nuxt/functions"
    }
  }
  

• 通过日志定位深层问题：
  本地运行firebase emulators:start模拟部署环境，查看Functions日志；线上部署后，通过Firebase控制台的Functions日志面板，获取更详细的报错信息。

内容的提问来源于stack exchange，提问作者Darren John Mathews