使用NextJS+NextAuth+Firebase时出现projectId未提供的FirebaseError

错误原因 #

报错FirebaseError: "projectId" not provided in firebase.initializeApp.的核心问题是你的firebaseConfig中projectId字段值为undefined，根源在于你获取环境变量的方式不正确。

解决方案 #

1. 修正环境变量获取方式 #

Next.js不支持直接通过import nextConfig from "next.config"读取环境变量，必须使用process.env来访问。修改你的firebaseConfig定义：

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};

2. 确认环境变量配置正确 #

• 检查你的.env.local文件（或对应环境的变量文件），确保FIREBASE_PROJECT_ID拼写正确，值与Firebase控制台中的项目ID完全一致：

  FIREBASE_API_KEY=your-api-key
  FIREBASE_PROJECT_ID=your-project-id
  # 其他Firebase变量...
  

• 如果是在next.config.js的env字段配置变量，确保配置格式正确：

  // next.config.js
  module.exports = {
    env: {
      FIREBASE_API_KEY: "your-api-key",
      FIREBASE_PROJECT_ID: "your-project-id",
      // 其他变量...
    },
  };
  

3. 验证Firebase初始化前的配置 #

可以在初始化Firebase前临时打印firebaseConfig，确认projectId有有效值（开发环境下使用，上线前删除）：

console.log("Firebase Config:", firebaseConfig); // 确认projectId不为undefined
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

4. 检查依赖版本兼容性 #

确保@next-auth/firebase-adapter与next-auth的版本匹配，避免因版本不兼容导致的隐性问题。

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