Next.js集成Firebase V9 FCM时遇Service messaging不可用错误

核心原因 #

Next.js是服务端渲染框架，你的firebase.js代码会在服务端执行，但FCM的getMessaging依赖浏览器专属API（如navigator），服务端环境不存在这些对象，导致初始化失败抛出错误。

解决方案：仅在浏览器环境初始化FCM #

修改firebase.js代码，确保messaging相关操作仅在客户端执行：

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

const firebaseConfig = {
  apiKey: "*************",
  authDomain: "********************",
  projectId: "******************",
  storageBucket: "*****************",
  messagingSenderId: "*************",
  appId: "**********************"
};

const firebaseApp = initializeApp(firebaseConfig);

// 仅在浏览器环境初始化messaging实例
let messaging;
if (typeof window !== 'undefined') {
  messaging = getMessaging(firebaseApp);
}

export const getOrRegisterServiceWorker = () => {
  if ('serviceWorker' in navigator) {
    return window.navigator.serviceWorker
      .getRegistration('/firebase-push-notification-scope')
      .then((serviceWorker) => {
        if (serviceWorker) return serviceWorker;
        return window.navigator.serviceWorker.register('/firebase-messaging-sw.js', {
          scope: '/firebase-push-notification-scope',
        });
      });
  }
  throw new Error('The browser doesn`t support service worker.');
};

export const getFirebaseToken = () => {
  if (!messaging) throw new Error('Messaging is not available in this environment');
  
  return getOrRegisterServiceWorker()
    .then((serviceWorkerRegistration) =>
      getToken(messaging, { vapidKey: "***********", serviceWorkerRegistration }));
};

export const onForegroundMessage = () => {
  if (!messaging) throw new Error('Messaging is not available in this environment');
  
  return new Promise((resolve) => onMessage(messaging, (payload) => resolve(payload)));
};

额外检查项 #

• 确认firebase-messaging-sw.js放在Next.js的public目录下，保证service worker文件能被直接访问
• 确保运行环境是HTTPS（localhost除外），FCM需要HTTPS才能正常工作
• 检查Firebase控制台已启用Cloud Messaging服务，vapidKey为控制台生成的有效密钥

内容的提问来源于stack exchange，提问作者Sayed Hassan Hussaini