在Vercel部署Firebase集成项目时，如何正确配置环境变量？

核心问题分析 #

你遇到的错误提示project:undefined，说明Firebase配置中的projectId没有正确读取到环境变量值，导致Firebase无法识别你的项目，进而触发权限拒绝及连接失败的问题。

步骤1：Vercel端正确配置环境变量 #

• 进入Vercel项目控制台，打开「Settings」→「Environment Variables」
• 根据你的项目框架添加对应变量：
  • Next.js项目：所有需要在前端（浏览器端）使用的环境变量必须添加NEXT_PUBLIC_前缀，示例：
    • NEXT_PUBLIC_FIREBASE_API_KEY = 你的Firebase apiKey值
    • NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN = 你的Firebase authDomain值
    • NEXT_PUBLIC_FIREBASE_PROJECT_ID = 你的Firebase projectId值
    • NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET = 你的Firebase storageBucket值
    • NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID = 你的Firebase messagingSenderId值
    • NEXT_PUBLIC_FIREBASE_APP_ID = 你的Firebase appId值
  • Create React App项目：变量名需以REACT_APP_为前缀，如REACT_APP_FIREBASE_API_KEY
• 保存变量后，必须触发重新部署（环境变量修改后不会自动应用到已有部署）

步骤2：代码端正确读取环境变量 #

根据框架调整代码中的配置读取逻辑，同时添加配置校验避免初始化失败：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// 根据你的框架替换前缀，比如Next.js用NEXT_PUBLIC_，CRA用REACT_APP_
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
};

// 校验配置完整性，提前发现问题
if (!firebaseConfig.apiKey || !firebaseConfig.projectId) {
  throw new Error("Firebase配置未正确加载，请检查Vercel环境变量是否配置并重新部署");
}

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

额外排查点 #

1. 检查Firebase项目状态：登录Firebase控制台，确认你的项目没有被暂停（错误中的「suspended」可能关联项目状态异常）
2. 验证环境变量生效情况：部署后在浏览器控制台打印console.log(firebaseConfig)，确认所有配置项均为有效值，无undefined
3. Firestore权限规则：若环境变量正常后仍有权限问题，检查Firebase控制台的Firestore规则，开发阶段可临时设置为：

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   上线后需调整为符合业务需求的安全规则。

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