Vercel部署问题：Firebase配置环境变量未定义

问题描述 #

在Vercel上部署集成Firebase的React（Next.js）应用时，firebase.js中通过process.env.NEXT_PUBLIC_*读取环境变量，但部署后打印firebaseConfig所有值均为undefined，导致Firebase无法正常初始化。代码如下：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getDatabase } from "firebase/database";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  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,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

// Initialize Firebase
console.log(firebaseConfig);
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const database = getDatabase(app);

export default database;

已在Vercel控制台设置对应环境变量，变量名与firebaseConfig中一致，但问题依然存在。

问题成因 #

1. Vercel环境变量未触发重新构建：Vercel的构建缓存会保留旧的环境变量，新增或修改变量后未重新部署，导致新变量未被读取。
2. 环境变量名称/大小写不匹配：变量名存在拼写错误（如漏写NEXT_PUBLIC_前缀、大小写错误），导致代码无法匹配到控制台的变量。
3. 环境变量作用域设置错误：仅在开发环境设置变量，生产部署时未选择对应作用域，导致生产环境无法读取变量。
4. Next.js构建配置干扰：next.config.js中自定义的环境变量配置覆盖了默认读取逻辑，或Next.js版本过低导致NEXT_PUBLIC_前缀失效。

解决方法 #

• 强制重新部署项目：进入Vercel控制台对应项目的Deployments页面，选择最新部署记录，点击Redeploy，并取消勾选Use existing Build Cache，强制重新构建以加载新的环境变量。
• 严格核对变量名称：逐一检查Vercel控制台的变量名与代码中process.env.XXX完全一致，确保大小写、前缀（NEXT_PUBLIC_）无遗漏或错误。
• 调整环境变量作用域：在Vercel设置环境变量时，将作用域选择为Production（生产部署），或同时勾选Development、Preview、Production以覆盖所有环境。
• 检查Next.js配置：若使用Next.js，确保next.config.js中未自定义env字段干扰变量读取；若版本过低，升级至12.x及以上稳定版本，保证NEXT_PUBLIC_前缀的变量能正确暴露给客户端代码。
• 本地验证变量读取：本地执行npm run build构建生产包，再运行npm start启动服务，查看控制台输出的firebaseConfig是否正常，排除代码本身的问题。

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