Next.js中Firebase前台通知无法正常工作问题求助

可能原因及对应解决方案 #

1. Firebase App初始化时机问题 #

你的useFirebaseMessaging钩子中，firebaseApp可能在组件挂载时还未完成初始化，导致getMessaging无法获取有效实例，进而onMessage监听失效。

修复方式：
将firebaseApp作为useEffect的依赖项，确保只有当App初始化完成后才执行监听逻辑：

const useFirebaseMessaging = () => {
  useEffect(() => {
    if (!firebaseApp) return; // 先判断App是否初始化完成
    const messaging = getMessaging(firebaseApp);

    const unsubscribe = onMessage(messaging, payload => {
      console.log('Foreground message received:', payload);
      // 后续通知逻辑
    });

    return () => unsubscribe();
  }, [firebaseApp]); // 添加firebaseApp到依赖数组
};

2. 通知权限未正确获取 #

代码中仅判断Notification.permission === 'granted'，但用户可能尚未授权，或授权状态未同步到当前页面。

修复方式：
在组件挂载时主动请求通知权限：

const useFirebaseMessaging = () => {
  useEffect(() => {
    if (!firebaseApp) return;
    const messaging = getMessaging(firebaseApp);

    // 主动请求通知权限
    const requestNotificationPermission = async () => {
      const permission = await Notification.requestPermission();
      if (permission !== 'granted') {
        console.error('Notification permission denied');
        return;
      }
    };

    requestNotificationPermission();

    const unsubscribe = onMessage(messaging, payload => {
      console.log('Foreground message received:', payload);
      if (Notification.permission === 'granted') {
        // 创建通知逻辑
      }
    });

    return () => unsubscribe();
  }, [firebaseApp]);
};

3. Payload结构不匹配 #

你的后台Service Worker处理的是payload.data字段，但前台代码尝试从payload.notification中取数据——如果推送的是纯data类型消息，payload.notification会是undefined，导致通知无法正常显示。

修复方式：
统一从payload.data或兼容两种结构获取数据：

new Notification(payload.data?.title || payload.notification?.title || 'New Notification', {
  body: payload.data?.body || payload.notification?.body,
  icon: payload.data?.icon || payload.notification?.image || '/android-chrome-512x512.png',
});

4. Firebase SDK版本过旧 #

你使用的是v7.9.1版本，较旧的SDK可能与现代浏览器、Next.js新特性存在兼容性问题。

修复方式：
升级到最新的Firebase模块化SDK（v9+），调整代码为模块化写法：

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

const useFirebaseMessaging = () => {
  useEffect(() => {
    if (!firebaseApp) return;
    const messaging = getMessaging(firebaseApp);

    const unsubscribe = onMessage(messaging, (payload) => {
      console.log('Foreground message received:', payload);
      if (Notification.permission === 'granted') {
        const title = payload.data?.title || payload.notification?.title || 'New Notification';
        const body = payload.data?.body || payload.notification?.body;
        new Notification(title, { body, icon: '/android-chrome-512x512.png' });
      }
    });

    return unsubscribe;
  }, [firebaseApp]);
};

5. Next.js Service Worker注册问题 #

确保Service Worker已正确注册，且文件放置在Next.js的public目录下。

修复方式：
在_app.js中注册Service Worker：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then(reg => console.log('Service Worker registered:', reg))
        .catch(err => console.error('Service Worker registration failed:', err));
    }
  }, []);

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

export default MyApp;

调试步骤 #

1. 打开浏览器控制台，检查是否有Firebase初始化或Service Worker相关报错。
2. 确认onMessage的console.log是否打印，判断监听是否生效。
3. 查看推送消息的payload结构，确保与前台代码的取值逻辑匹配。

内容的提问来源于stack exchange，提问作者T090 Subhashish Nabajja