ReactJS集成Firebase Cloud Messaging报错：messaging.getToken is not a function

问题描述 #

尝试集成FCM功能时，调用messaging.getToken()出现以下错误：

TypeError: WEBPACK_IMPORTED_MODULE_2__.messaging.getToken is not a function

已花费6小时排查仍未解决，相关代码文件如下：

原代码文件 #

文件：firebase.js #

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

export const requestPermission = () => {
    Notification.requestPermission()
    .then( permission => {
        if (permission === 'granted') {
            messaging.getToken()
            .then(currToken => console.log(currToken))
            .catch(err => console.log(err))
        }
    })
    .catch(err => console.log(err))
}

文件：main.js #

<button onClick={requestPermission}>
    <p> New Task </p>
</button>

文件：firebase-messaging-sw.js #

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

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "My api key",
  authDomain: "my domain name",
  projectId: "my project id",
  storageBucket: "my storage bucket address",
  messagingSenderId: "id",
  appId: "my app Id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Cloud Messaging
export const messaging = getMessaging();


export default app;

错误原因及修复方案 #

1. Firebase版本不兼容 #

项目同时使用了Firebase v9+模块化API（firebase.js中的import { getMessaging, getToken }）和v6.2.3旧版本API（Service Worker中的importScripts），两者API结构差异极大，导致调用失败。需统一版本，推荐使用v9+兼容模式或纯模块化模式。

2. 未正确初始化Messaging实例 #

firebase.js中直接使用了未定义的messaging变量，需先初始化Firebase App，再创建Messaging实例。

3. Service Worker代码错误 #

旧版本Service Worker不支持export语法，且初始化方式与新版本不匹配。

修正后的代码 #

文件：firebase.js（使用v9+模块化API）

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

// 初始化Firebase App
const firebaseConfig = {
  apiKey: "My api key",
  authDomain: "my domain name",
  projectId: "my project id",
  storageBucket: "my storage bucket address",
  messagingSenderId: "id",
  appId: "my app Id"
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

export const requestPermission = () => {
  Notification.requestPermission()
    .then(permission => {
      if (permission === 'granted') {
        // v9+的getToken需要传入messaging实例和VAPID密钥
        getToken(messaging, { vapidKey: "你的VAPID公钥" })
          .then(currToken => console.log(currToken))
          .catch(err => console.log(err))
      }
    })
    .catch(err => console.log(err))
}

文件：firebase-messaging-sw.js（统一使用v9+兼容模式）

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

const firebaseConfig = {
  apiKey: "My api key",
  authDomain: "my domain name",
  projectId: "my project id",
  storageBucket: "my storage bucket address",
  messagingSenderId: "id",
  appId: "my app Id"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 后台消息处理（可选）
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

额外注意事项 #

• 获取VAPID密钥：在Firebase控制台→项目设置→云消息传递→Web配置→生成密钥对，复制公钥作为vapidKey参数。
• 确保Service Worker文件放在项目根目录，且在HTTPS环境下运行（本地开发可使用localhost）。
• 项目安装的firebase包版本需与Service Worker中引入的版本一致（比如都用9.23.0）。

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