Firebase getMessaging报Service messaging is not available排查

问题复现 #

已完成Firebase SDK安装，执行初始化代码调用FCM服务时抛出Service messaging is not available错误，报错截图如下：

问题代码：

import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getMessaging } from "firebase/messaging";

// Web应用Firebase配置
const firebaseConfig = {
  apiKey: "AIzaSyA0dAgRPZLlgULgnOp2MH_3xtVbWPs03Cg",
  authDomain: "u-63f99.firebaseapp.com",
  projectId: "u-63f99",
  storageBucket: "u-63f99.appspot.com",
  messagingSenderId: "884933400988",
  appId: "1:884933400988:web:0b7e0e37b0f23da236d059",
};

// Firebase初始化
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const fireStore = getFirestore(app);
const messaging = getMessaging(app);
export { auth, fireStore, messaging };

触发原因 #

• 核心方法缺失导入：代码未从firebase/app核心包导入initializeApp方法，导致Firebase应用实例初始化不完整，无法正常注册messaging服务
• 运行环境不符合要求：FCM Web端仅支持在安全上下文（HTTPS协议、localhost本地开发环境）运行，非安全域名、普通HTTP环境、未配置推送权限的Webview/扩展环境下调用会直接报服务不可用
• 控制台服务未开通：Firebase项目创建后未手动开启Cloud Messaging服务，SDK无法拉取到服务配置
• 本地依赖损坏：node_modules缓存异常导致firebase/messaging模块文件缺失，SDK加载服务失败

修复步骤 #

1. 补全核心方法导入
   在代码顶部添加initializeApp的导入语句，修正后导入部分代码：

// 新增核心包初始化方法导入
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getMessaging } from "firebase/messaging";

2. 适配运行环境

• 本地开发使用localhost访问，避免使用HTTP协议+局域网IP的方式调试FCM
• 生产环境必须为站点配置HTTPS证书，非安全上下文下FCM无法正常加载
• 增加环境判断逻辑，非FCM支持环境下不初始化messaging，避免阻塞Auth、Firestore等其他服务正常运行，参考代码：

let messaging = null;
// 仅在浏览器端、安全上下文环境下初始化FCM
if (typeof window !== "undefined" && (location.protocol === "https:" || location.hostname === "localhost")) {
  messaging = getMessaging(app);
}
export { auth, fireStore, messaging };

3. 检查控制台配置
   进入Firebase控制台对应项目的Cloud Messaging板块，按照引导完成服务开通，确认Web推送配置项无缺失
4. 修复本地依赖
   执行对应包管理器的命令清理缓存并重装依赖，解决模块文件缺失问题：

# npm 环境
rm -rf node_modules package-lock.json && npm install

# yarn 环境
rm -rf node_modules yarn.lock && yarn install

# pnpm 环境
rm -rf node_modules pnpm-lock.yaml && pnpm install

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