React JS中Firebase 9版本推送通知异常问题求助

已完成firebase-messaging-sw.js部署、getToken调用等步骤，此前能正常获取FCM Token，但当前出现以下问题：

问题1：调用getTokenFound()时报错 #

报错信息：

An error occurred while retrieving token.  FirebaseError: Messaging:
A problem occurred while subscribing the user to FCM: Request contains an invalid argument. 
(messaging/token-subscribe-failed).
at requestGetToken (requests.ts:67:1)
at async getNewToken (token-manager.ts:139:1)

问题2：跨设备Service Worker注册失败 #

仅主开发设备可正常运行，其他设备报错：

An error occurred while retrieving token.  FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope 
('http://localhost:3000/firebase-cloud-messaging-push-scope%27) with script 
('http://localhost:3000/firebase-messaging-sw.js%27): ServiceWorker script evaluation failed 
(messaging/failed-service-worker-registration).

额外问题：拒绝通知权限后再允许时触发错误循环，出现无效参数错误。

相关代码块 #

public目录下的firebase-messaging-sw.js #

importScripts('https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.1/firebase-messaging.js');

const firebaseConfig = {
    apiKey: DATA,
    authDomain: DATA,
    databaseURL: DATA,
    projectId: DATA,
    storageBucket: DATA,
    messagingSenderId: DATA,
    appId: DATA,
    measurementId: DATA
  };

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log("Received background message ", payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: "../src/assets/image/default.svg",
    tag: "notification-1"
  };
  
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

项目中的firebase.js #

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getFunctions } from "firebase/functions";
import { getStorage } from "firebase/storage";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import 'firebase/storage';

export const app = initializeApp({
  apiKey: data,
  authDomain: data,
  databaseURL: data,
  projectId: data,
  storageBucket: data,
  messagingSenderId: data,
  appId: data,
  measurementId: data
});


export const messaging = getMessaging(app);
export const firestore = getFirestore(app);
export const functions = getFunctions(app);
export const storage = getStorage(app);



export const getTokenFound = async () => {
  let currentToken = "";
  try {
    currentToken = await getToken(messaging, { vapidKey: myVapidKey});
    if (currentToken) {
      console.log("CURRENT TOKEN", currentToken)
    } else {
    }
  } catch (error) {
    console.log("An error occurred while retrieving token. ", error);
  }

  return currentToken;
};

export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      console.log("payload", payload)
      resolve(payload);
    });
  });

排查思路 #

针对messaging/token-subscribe-failed错误 #

• 检查myVapidKey有效性：确保是Firebase控制台生成的Web Push证书公钥，为无多余空格/换行的base64字符串。
• 明确权限获取逻辑：调用getToken前，通过Notification.requestPermission()主动获取权限，避免权限状态异常导致参数错误。
• 清理旧Token缓存：通过浏览器DevTools（Application > Storage > IndexedDB > firebase-messaging-database）删除已存储的旧Token，再重新调用getToken。
• 核对Firebase配置：确保firebase.js和firebase-messaging-sw.js中的firebaseConfig完全一致，重点检查messagingSenderId和projectId。

针对messaging/failed-service-worker-registration错误 #

• 确认Service Worker路径：firebase-messaging-sw.js必须放在public根目录，访问http://localhost:3000/firebase-messaging-sw.js需直接返回文件，无404错误。
• 修复资源路径错误：Service Worker运行在根目录，icon: "../src/assets/image/default.svg"路径无效，改为/assets/image/default.svg（需确保public目录下存在对应文件），路径错误会导致脚本执行失败。
• 统一SDK版本：firebase-messaging-sw.js用的是v8.3.1，firebase.js用的是v9+模块化SDK，版本不兼容可能导致注册失败，建议统一为同一版本（比如都用v9+兼容模式或v8）。
• 检查HTTPS环境：Service Worker要求HTTPS（localhost除外），非开发环境需确保使用HTTPS协议。

针对权限切换后的错误循环 #

• 增加权限状态处理：当权限从拒绝改为允许时，先调用deleteToken清除旧的无效Token记录，再重新获取新Token。
• 添加错误重试逻辑：捕获权限相关错误后，延迟1-2秒再重试获取Token，避免频繁触发错误循环。

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