Next.js 13集成Firebase Analytics报错：缺少projectId配置值

先排查最容易踩的坑 #

1. 确保所有Firebase配置变量都加了NEXT_PUBLIC_前缀
   你提到尝试过加前缀，但要确认每个字段都改到位，包括firebaseConfig里的变量引用和.env文件里的变量名：

   // firebase.js里的配置要改成这样
   const firebaseConfig = {
     apiKey: process.env.NEXT_PUBLIC_API_KEY,
     authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
     projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
     storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
     messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
     appId: process.env.NEXT_PUBLIC_APP_ID,
     measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
   };
   

   .env文件里的变量也要对应：

   NEXT_PUBLIC_API_KEY=你的apiKey
   NEXT_PUBLIC_AUTH_DOMAIN=你的authDomain
   NEXT_PUBLIC_PROJECT_ID=你的projectId
   # 其他变量同理
   

2. 重启开发服务器
   修改.env文件后必须重启Next.js的dev服务，否则新的环境变量不会生效，这是很多人容易忽略的点。

3. 检查.env文件的位置和格式

   • .env文件必须放在项目根目录（和package.json、next.config.js同层级）
   • 变量值不要加引号，比如NEXT_PUBLIC_PROJECT_ID=my-project-123，不是NEXT_PUBLIC_PROJECT_ID="my-project-123"
   • 变量名不要有拼写错误，比如把PROJECT_ID写成PROJECTID或者PROJECT_ID_

如果以上都没问题，试试延迟初始化Analytics #

因为Firebase Analytics依赖浏览器环境，全局firebase.js可能在服务器端被执行，导致配置加载异常。可以把Analytics的初始化放到客户端组件的useEffect里：

// index.js页面里的代码调整
import { useEffect, useState } from 'react';
import { getAnalytics, logEvent } from 'firebase/analytics';
import app from '../firebase';

export default function Home() {
  const [analytics, setAnalytics] = useState(null);

  useEffect(() => {
    // 确保只在客户端初始化
    if (typeof window !== 'undefined') {
      const analyticsInstance = getAnalytics(app);
      setAnalytics(analyticsInstance);
    }
  }, []);

  return (
    <Button
      key={`${name}_${index}`}
      href={url}
      mouseEnter={() => selectedImg !== img && handleMouseEnter(img)}
      customStyles={'py-5 bg-primary-blue/60'}
      onClick={() => analytics && logEvent(analytics, name)}
    >
      Test
    </Button>
  );
}

最后检查Firebase控制台的配置 #

去Firebase控制台重新复制一遍项目的配置代码，确认projectId字段存在且正确，有时候复制的时候可能会漏掉某个字段。

内容的提问来源于stack exchange，提问作者Daniel Bílek