Nuxt3中使用.env变量配置Firebase出现auth/invalid-api-key错误

问题场景 #

在Nuxt3应用中直接硬编码Firebase配置时功能完全正常，但改用.env环境变量配置后，触发错误：

Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)

虽然通过console.log(process.env.FIREBASE_API_KEY)能输出正确的密钥字符串，但Firebase配置始终失效。

问题根源 #

代码中存在多处环境变量名拼写错误：

• projectId对应的变量名误写为FIREBASE_PROJCT_ID（缺失字母E，正确应为FIREBASE_PROJECT_ID）
• appId错误引用了FIREBASE_MESSAGING_SENDER_ID（应使用对应应用ID的环境变量）
• measurementId对应的变量名误写为FIREBASE_MEASURMENT_ID（缺失字母E，正确应为FIREBASE_MEASUREMENT_ID）

修复步骤 #

1. 修正.env文件变量名
   确保.env文件中所有Firebase配置项的变量名拼写准确：

FIREBASE_API_KEY=你的API密钥
FIREBASE_AUTH_DOMAIN=你的Auth域名
FIREBASE_PROJECT_ID=你的项目ID
FIREBASE_STORAGE_BUCKET=你的存储桶地址
FIREBASE_MESSAGING_SENDER_ID=你的推送Sender ID
FIREBASE_APP_ID=你的应用ID
FIREBASE_MEASUREMENT_ID=你的统计ID

2. 修正Firebase初始化代码中的变量引用
   在初始化Firebase的代码里，将每个配置项对应到正确的环境变量：

import { initializeApp } from "firebase/app";

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, // 修正为正确的appId变量
  measurementId: process.env.FIREBASE_MEASUREMENT_ID // 修正拼写错误
};

const app = initializeApp(firebaseConfig);

3. 重启Nuxt3开发服务器
   确保环境变量重新加载，避免缓存导致的配置不生效。

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