Firebase Cloud Messaging Web开发报错：messaging.getToken is not a function

错误原因 #

你使用的是Firebase JS SDK v9的模块化版本，该版本完全废弃了旧版SDK的命名空间调用模式，因此messaging.getToken()、messaging.onTokenRefresh()这类直接挂在实例上的方法不存在，才会触发not a function的报错。

修复步骤 #

1. 补充导入缺失的FCM方法
   修改firebase-messaging的导入语句，加入你用到的getToken、onMessage、onTokenRefresh三个方法：

import { getMessaging, getToken, onMessage, onTokenRefresh } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";

2. 替换所有旧版调用写法

• 将所有messaging.getToken()替换为getToken(messaging, { vapidKey: '你自己的VAPID公钥' })，调用时需要传入vapidKey参数
• 将messaging.onTokenRefresh(function () {替换为onTokenRefresh(messaging, function () {

3. 修复代码笔误
   你现有代码中有一处变量名错误：getToken回调里的参数是t，但你写的是Token is " + r，将r改为t即可；另外你重复调用了两次getToken，冗余逻辑可以直接删掉。

修复后核心逻辑参考 #

function initFirebaseMessagingRegistration() {
    Notification.requestPermission()
        .then(function () {
            messageElement.innerHTML = "Got notification permission";
            console.log("Got notification permission");
            // 替换为模块化调用，填入你自己的VAPID公钥
            return getToken(messaging, { vapidKey: "替换为你自己的VAPID公钥" });
        })
        .then(function (token) {
            tokenElement.innerHTML = "Token is " + token;
        })
        .catch(function (err) {
            errorElement.innerHTML = "Error: " + err;
            console.log("Didn't get notification permission", err);
        });

    onMessage(messaging, (payload) => {
        console.log("Message received. ", JSON.stringify(payload));
        notificationElement.innerHTML = 
            notificationElement.innerHTML + " " + payload.data.notification;
    });
    // 替换onTokenRefresh调用
    onTokenRefresh(messaging, function () {
        getToken(messaging, { vapidKey: "替换为你自己的VAPID公钥" })
            .then(function (refreshedToken) {
                console.log('Token refreshed.');
                tokenElement.innerHTML = "Token is " + refreshedToken;
            }).catch(function (err) {
                errorElement.innerHTML = "Error: " + err;
                console.log('Unable to retrieve refreshed token ', err);
            });
    });
    console.log("clicked");
}

VAPID公钥可以在Firebase控制台的「项目设置→Cloud Messaging→Web配置」中生成，不要使用占位字符串。

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