Firebase V9中无法使用Cloud Messaging，保存配置文件时报错

问题详情 #

每次保存firebase.js配置文件都会触发错误，无法正常初始化Firebase Cloud Messaging（FCM）。

错误截图：

当前使用的firebase.js配置代码：

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getMessaging } from "firebase/messaging";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTHDOMAIN,
  projectId: process.env.FIREBASE_PROJECTID,
  storageBucket: process.env.FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGINGSENDERID,
  appId: process.env.FIREBASE_APPID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore();
const storage = getStorage();
const messaging = getMessaging(app); // 此行报错

export { app, db, storage, messaging };

排查与解决步骤 #

1. 验证FCM依赖完整性
   确保已正确安装Firebase全量包，执行：

   npm install firebase
   # 或 yarn add firebase
   

   依赖缺失是初始化失败的常见原因，尤其是单独引入子模块时可能遗漏底层依赖。

2. 检查环境变量有效性
   确认firebaseConfig中的所有环境变量（尤其是messagingSenderId）已正确加载。可临时添加日志验证：

   console.log("Firebase Config:", firebaseConfig);
   

   如果变量为空，检查.env文件路径、变量名拼写是否正确，以及框架（如Vue/React）是否配置了环境变量加载规则。

3. 确认FCM服务已启用
   登录Firebase控制台，检查当前项目是否已开启Cloud Messaging服务，且messagingSenderId与控制台显示的完全一致。

4. 兼容非HTTPS开发环境
   FCM仅支持HTTPS环境（localhost除外），如果是本地HTTP开发环境，需先判断浏览器兼容性再初始化：

   import { getMessaging, isSupported } from "firebase/messaging";
   
   let messaging = null;
   // 仅在浏览器环境下判断
   if (typeof window !== "undefined") {
     isSupported().then(supported => {
       if (supported) {
         messaging = getMessaging(app);
       }
     });
   }
   

5. 更新到稳定版Firebase
   若使用的是Firebase V9的beta或预览版，可能存在已知bug，更新到最新稳定版：

   npm update firebase
   

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