React Native中如何用.env变量替换Firebase配置数据？

问题核心原因 #

你的配置存在三个关键错误：.env文件格式不规范、Expo环境变量前缀使用错误、未重启开发服务器加载新变量。以下是具体修正步骤：

1. 修正.env文件格式 #

.env文件的语法要求严格，需调整为以下规范格式：

• 移除变量值末尾的逗号
• 变量名与=之间不要留空格（可选但更符合规范）
• 将前缀从REACT_APP_改为EXPO_PUBLIC_（Expo仅识别该前缀的客户端环境变量）

修正后的.env示例：

# 存储敏感配置，该文件不提交到Git
EXPO_PUBLIC_API_KEY=config-info
EXPO_PUBLIC_AUTH_DOMAIN=config-info
EXPO_PUBLIC_PROJECT_ID=config-info
EXPO_PUBLIC_STORAGE_BUCKET=config-info
EXPO_PUBLIC_MESSAGING_SENDER_ID=config-info
EXPO_PUBLIC_APP_ID=config-info

2. 更新firebaseConfig.js中的变量引用 #

将所有process.env.REACT_APP_*替换为process.env.EXPO_PUBLIC_*，确保能正确读取Expo暴露的环境变量：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.EXPO_PUBLIC_API_KEY,
  authDomain: process.env.EXPO_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.EXPO_PUBLIC_PROJECT_ID,
  storageBucket: process.env.EXPO_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.EXPO_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.EXPO_PUBLIC_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

3. 重启Expo开发服务器 #

环境变量修改后，必须完全关闭并重新启动Expo开发服务器，新的变量才能被加载生效。

额外说明：Firebase配置的安全性 #

需要明确：Firebase的客户端配置（apiKey、authDomain等）本身就是公开的，即使通过.env隐藏，打包后这些变量仍会嵌入到客户端代码中，任何人都能反编译获取。真正的安全防护需要通过以下方式实现：

• 配置Firebase安全规则（Firestore、存储规则）限制数据访问权限
• 使用Firebase Auth验证用户身份，仅允许授权用户操作数据

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