如何在React+Firebase项目中正确访问.env文件中的变量？

1. 确认.env文件的命名与位置 #

• 文件名必须是.env（开头的点不能省略），放在项目根目录（和package.json同级），不能放在子文件夹中。
• 前端框架项目需注意变量前缀：
  • React项目：变量名必须以REACT_APP_开头
  • Vue项目：变量名必须以VUE_APP_开头
  • Next.js客户端组件：变量名必须以NEXT_PUBLIC_开头（服务端组件无需前缀）

2. 规范.env文件的内容格式 #

• 变量名与值之间不要添加空格，示例：

  REACT_APP_FIREBASE_API_KEY=abc123xyz
  REACT_APP_FIREBASE_AUTH_DOMAIN=my-app.firebaseapp.com
  REACT_APP_FIREBASE_PROJECT_ID=my-app-12345
  

• 若值包含特殊字符（如空格、引号），需用双引号包裹：

  REACT_APP_FIREBASE_STORAGE_BUCKET="my-app-storage-bucket.appspot.com"
  

3. 在firebase.js中正确引用变量 #

根据项目类型选择对应方式读取变量：

前端客户端（React/Vue等） #

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
export default app;

Node.js服务端（Firebase Admin SDK） #

若框架未自动处理环境变量，先安装dotenv包：

npm install dotenv

再在firebase.js中加载并使用：

require('dotenv').config();
const admin = require('firebase-admin');

// 示例：使用服务账号文件路径
const serviceAccount = require(process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT_PATH);

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

module.exports = admin;

4. 重启开发服务器 #

环境变量仅在服务器启动时加载，修改.env后必须重启开发服务（如npm run dev），否则新变量不会生效。

5. 排查常见错误 #

• 变量名拼写不一致：检查.env中的变量名与代码中的process.env.XXX是否完全匹配（包括大小写、下划线）。
• 框架前缀遗漏：比如React项目中变量名未加REACT_APP_，导致无法被识别。
• .env文件位置错误：确保文件在项目根目录，而非src或其他子文件夹。

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