Next.js中Firebase环境变量无法加载，请求技术协助

核心错误：变量名拼写不一致 #

你的.env.local文件中定义的环境变量前缀是NEXT_PUBLIC_FIREBASE_*，但在firebase.tsx代码里调用时写成了NEXT_PUBLIC_REBASE_*——把Firebase误写成了Rebase，这是导致变量无法加载的直接原因。

修复步骤 #

1. 修改firebase.tsx中的环境变量名，将所有NEXT_PUBLIC_REBASE_替换为NEXT_PUBLIC_FIREBASE_，修正后的代码如下：

import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth, signOut } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTHENTICATION_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,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID 
};

export const USER_EXIST = "user/exist" ;
export const USER_DUPLICATE = "user/duplicate" ;

export const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
export const db = getFirestore(app);

export async function logOut(){
  await signOut(getAuth())
  .catch((err) => alert(err));
}

2. 重启Next.js开发服务器：环境变量修改后需要重启服务才能生效，停止当前运行的npm run dev或yarn dev命令，重新启动即可。

额外验证建议 #

• 可以在代码中临时添加日志输出，确认变量是否加载成功：

console.log("Firebase API Key:", process.env.NEXT_PUBLIC_FIREBASE_API_KEY);

启动服务后查看控制台，若能输出正确的密钥值，则说明环境变量已正常加载。

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