Next.js集成Firebase Messaging报错：Service messaging is not available

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

1. 服务端环境调用了Messaging API #

Firebase Messaging的getMessaging仅能在浏览器客户端环境运行，Next.js中如果在服务端渲染逻辑（比如getServerSideProps、API路由、服务端组件）里调用该方法，就会触发此错误。

解决办法：

• 在客户端组件中通过useEffect确保在浏览器环境初始化：

  import { getMessaging } from "firebase/messaging";
  import { app } from "./firebase";
  import { useEffect, useState } from "react";
  
  function ClientMessaging() {
    const [messaging, setMessaging] = useState(null);
  
    useEffect(() => {
      if (typeof window !== "undefined") {
        const msgInstance = getMessaging(app);
        setMessaging(msgInstance);
      }
    }, []);
  
    // 使用前先判断实例是否存在
    return <div>{messaging && "Messaging初始化完成"}</div>;
  }
  
  export default ClientMessaging;
  

• 或者用Next.js动态导入禁用SSR：

  import dynamic from "next/dynamic";
  
  const MessagingComponent = dynamic(() => import("./ClientMessaging"), {
    ssr: false,
  });
  

2. Firebase项目未启用Cloud Messaging服务 #

登录Firebase控制台进入你的项目：

• 点击左侧菜单项目设置
• 切换到云消息传递标签页
• 确认服务已启用，且配置文件中的messagingSenderId与控制台显示的一致

3. 依赖缺失或版本异常 #

虽然你已重装Firebase 9.15.0，仍可做以下检查：

• 查看package.json确认firebase版本为9.15.0
• 执行npm list @firebase/messaging检查依赖是否存在，若缺失手动安装：

  npm install @firebase/messaging@9.15.0
  

4. 生产环境未满足HTTPS要求 #

Cloud Messaging要求生产环境必须使用HTTPS（localhost环境除外），若你的生产部署环境为HTTP，会导致Messaging服务不可用，需切换到HTTPS部署。

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