Next.js项目使用环境变量初始化Firebase应用失败如何解决

问题原因 #

Next.js 默认的环境变量规则为：仅带 NEXT_PUBLIC_ 前缀的变量会被注入到客户端侧运行的代码中，不带此前缀的变量仅能在服务端代码中访问。你当前的Firebase初始化逻辑运行在客户端侧，无匹配前缀的环境变量读取结果为undefined，导致Firebase配置无效、初始化失败。

修复步骤 #

• 修改项目根目录下的.env文件（注意.env文件需与next.config.js同级，开发环境推荐用.env.local存储本地变量），给所有Firebase相关环境变量加上NEXT_PUBLIC_前缀，示例如下：

NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY=你的API_KEY实际值
NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN=你的AUTH_DOMAIN实际值
NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID=你的PROJECT_ID实际值
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=你的STORAGE_BUCKET实际值
NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGIN_SENDER_ID=你的MESSAGIN_SENDER_ID实际值
NEXT_PUBLIC_FIREBASE_APP_ID=你的APP_ID实际值
NEXT_PUBLIC_FIREBASE_CLIENT_MEASUREMENT_ID=你的MEASUREMENT_ID实际值

• 修改firebase/firebaseClient.js中的配置读取逻辑，同步替换为加前缀后的变量名：

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGIN_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_MEASUREMENT_ID,
};

• 重启Next.js开发服务，环境变量修改后必须重启服务才会生效。

可选排查项 #

如果修改后仍报错，可以在firebaseClient.js中添加console.log(process.env)打印环境变量，确认变量是否被正确注入，排查是否存在变量名拼写错误、值前后带多余空格等问题。

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