FCM消息接收异常求助：已获取Token但无法收到通知

结合你提供的代码文件，从以下几个核心方向逐一排查：

1. 检查 Service Worker（firebase-messaging-sw.js）配置 #

• 文件位置必须正确：该文件必须放在项目根目录（即访问路径为 https://你的域名/firebase-messaging-sw.js），不能放在子文件夹中，否则浏览器无法自动识别并注册。
• SDK 版本与依赖一致：确保文件中引入的 firebase/messaging/sw 版本和 package.json 中 firebase 版本完全匹配，版本不兼容会导致初始化失败。
• 后台消息处理逻辑：必须注册 onBackgroundMessage 并调用 self.registration.showNotification，否则后台状态下不会弹出通知。示例正确逻辑：

import { initializeApp } from "firebase/app";
import { getMessaging, onBackgroundMessage } from "firebase/messaging/sw";

const firebaseConfig = { /* 你的控制台配置 */ };
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

onBackgroundMessage(messaging, (payload) => {
  const { title, body } = payload.notification;
  self.registration.showNotification(title, { body, icon: '/你的图标路径.png' });
});

• 验证 Service Worker 注册：打开浏览器 DevTools → Application → Service Workers，确认 firebase-messaging-sw.js 状态为 activated，无报错信息。

2. 前端初始化代码（firebaseInit.js）检查 #

• Firebase 配置准确性：确保 firebaseConfig 中的 apiKey、authDomain、projectId 等参数与 Firebase 控制台「项目设置」中的配置完全一致，多一个空格或字符错误都会导致初始化失败。
• VAPID 密钥正确性：getToken 时传入的 vapidKey 必须是 Firebase 控制台「云消息传递」→「Web 配置」中生成的公钥，不是私钥。
• 通知权限请求：必须主动调用 Notification.requestPermission()，且用户已授予权限。如果权限被拒绝，直接无法获取 Token 和接收通知。
• 前台消息处理：前台状态下（页面打开），FCM 不会自动弹出通知，必须注册 onMessage 事件手动处理：

import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging(app);
onMessage(messaging, (payload) => {
  // 手动创建通知或更新页面UI
  new Notification(payload.notification.title, { body: payload.notification.body });
});

3. 组件代码（SigninForm.tsx、App.tsx）排查 #

• Token 有效性：确认获取到的 Token 已正确发送到后端（或用于 Firebase 控制台测试），且未过期。Token 会在用户清除浏览器数据、更换设备等场景下失效，需要重新获取。
• 初始化时机：确保 Firebase 初始化代码在组件挂载时执行（比如 useEffect 钩子），避免未初始化就调用消息相关方法。
• 权限状态监听：可以监听权限变化，当用户从拒绝改为允许时，重新获取 Token：

useEffect(() => {
  const checkPermission = async () => {
    const permission = await Notification.permission;
    if (permission === 'granted') {
      // 重新获取Token
    }
  };
  checkPermission();
}, []);

4. 依赖版本（package.json）检查 #

• 确保 firebase 包版本为稳定版，避免使用太旧或测试版。比如：

"dependencies": {
  "firebase": "^9.23.0"
}

• 不要同时安装多个版本的 Firebase 相关包，否则会出现冲突。

5. 推送消息格式与环境验证 #

• 消息格式：测试推送时，必须包含 notification 字段（用于自动触发通知），如果仅传 data 字段，需要手动处理展示。示例正确的推送 payload：

{
  "notification": {
    "title": "测试通知",
    "body": "这是一条FCM测试消息"
  },
  "to": "你的FCM Token"
}

• HTTPS 环境：FCM 要求生产环境必须使用 HTTPS（localhost 开发环境除外），HTTP 下 Service Worker 无法正常工作，无法接收后台通知。
• Firebase 控制台推送记录：在 Firebase 控制台「云消息传递」→「发送的消息」中查看推送状态，若显示「已送达」但未收到，说明客户端处理逻辑有问题；若显示「失败」，根据错误提示排查（比如 Token 无效、权限问题）。

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