Next.js集成Firebase通知部署时出现self未定义ReferenceError如何解决

云上老周

2026-9-24

问题根因

你遇到的ReferenceError: self is not defined错误本质是Firebase Cloud Messaging(FCM)仅支持浏览器端运行，依赖浏览器全局的self（Service Worker上下文对象），而Next.js构建阶段会执行服务端渲染/静态生成逻辑，Node.js服务端环境不存在self全局对象，直接导入或初始化FCM就会触发该错误导致构建失败。

解决方法

方法1：客户端侧判断后再初始化FCM
不要在代码顶层直接导入firebase/messaging相关模块，仅在确认是浏览器环境时再执行导入和初始化逻辑：

// firebase.js 示例
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  // 你的firebase配置
};
const app = initializeApp(firebaseConfig);

// 仅客户端环境初始化messaging
export let messaging;
if (typeof window !== "undefined") {
  import("firebase/messaging").then(({ getMessaging }) => {
    messaging = getMessaging(app);
  });
}

方法2：使用Next.js动态导入并禁用SSR
如果FCM逻辑封装在单独的组件中，使用dynamic导入该组件时关闭服务端渲染：

import dynamic from 'next/dynamic';

const MessagingComponent = dynamic(() => import('../components/MessagingComponent'), {
  ssr: false
});

方法3：在副作用钩子中执行FCM逻辑
如果使用Pages Router，将所有FCM相关逻辑放到useEffect中执行，useEffect仅会在客户端运行：

import { useEffect } from 'react';
import { app } from './firebase';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const initFCM = async () => {
      const { getMessaging, getToken } = await import('firebase/messaging');
      const messaging = getMessaging(app);
      // 后续获取token、监听通知等逻辑
    };
    initFCM();
  }, []);

  return <Component {...pageProps} />;
}