React项目集成Firebase时process未定义错误的解决求助

问题根源 #

这个错误是因为浏览器环境不存在Node.js的process对象，你的代码直接引用process.env读取环境变量，但变量没有被正确注入到前端代码中。

修复步骤 #

1. 修正环境变量文件格式 #

• 文件名必须正确：Create React App（CRA）要求开发环境用.env.development，生产环境用.env.production，别写错名字。
• 变量名必须以REACT_APP_开头，这是CRA强制规则，不然不会被注入到代码里。
• 去掉变量值前后的空格：你当前.env.development里REACT_APP_API_KEY= A*************有个前置空格，要改成REACT_APP_API_KEY=A*************，空格会导致变量值异常，甚至读取失败。

2. 重启开发服务器 #

CRA只会在启动时加载环境变量，改完.env文件后必须重启npm start或yarn start，不然新变量不会生效。

3. 补全所有Firebase所需环境变量 #

你的firebaseConfig里用到了6个变量，但目前只配了REACT_APP_API_KEY，剩下的也得在.env.development里补全，比如：

REACT_APP_API_KEY=A*************
REACT_APP_AUTH_DOMAIN=你的项目auth域名.firebaseapp.com
REACT_APP_PROJECT_ID=你的项目ID
REACT_APP_STORAGE_BUCKET=你的项目存储桶.appspot.com
REACT_APP_MESSAGING_SENDER_ID=你的消息发送ID
REACT_APP_ID=你的项目APP ID

缺变量会被解析成undefined，也可能导致Firebase初始化失败。

4. 如果用Vite创建的React项目（非CRA） #

Vite不支持process.env，得换成import.meta.env，比如把process.env.REACT_APP_API_KEY改成import.meta.env.VITE_APP_API_KEY，同时变量名前缀改成VITE_APP_，改完也要重启Vite服务器。

5. 验证变量是否加载成功 #

可以在代码里加一行临时打印，确认变量能读取到：

console.log('API Key:', process.env.REACT_APP_API_KEY);

要是打印undefined，说明变量没加载成功，回到步骤1检查文件。

额外提醒 #

• 别把.env文件提交到版本库，确保.gitignore里包含.env*（除了.env.example这类示例文件）。
• 生产部署时，要根据平台要求配置环境变量（比如Vercel、Netlify都有专门的配置面板）。

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