如何使用dotenv为React+Firebase项目添加环境变量并解决待办数据加载异常

你的问题本质是环境变量读取失败，导致Firebase初始化参数异常，实际连接的不是你存储了历史待办的Firebase项目，因此刷新后无法读取历史数据，直接硬编码凭证时参数正确，所以功能正常。

• 删掉所有代码里的require("dotenv").config()语句，包括firebase.js和app.js里的都删除。Next.js会自动将带NEXT_PUBLIC_前缀的环境变量暴露给客户端代码，手动引入dotenv反而会导致客户端读取环境变量异常。
• 确认你的环境变量配置文件（.env、.env.local）放在项目根目录，与package.json、next.config.js同级，不要放在src或其他子目录中。
• 检查.env文件内的变量名与代码中引用的名称完全一致，没有拼写错误、前后多余空格，变量值不需要额外加引号（除非值本身包含特殊字符）。
• 修改完.env文件和代码后，完全关闭当前开发服务，重新执行npm run dev或yarn dev启动项目。Next.js仅在服务启动时加载环境变量，运行过程中修改.env不会生效。
• 可临时在firebase.js初始化代码前加日志验证变量是否加载正常：

console.log('Firebase API Key:', process.env.NEXT_PUBLIC_API_KEY)

启动项目后打开浏览器控制台查看输出，若输出为正确的API Key说明加载成功，若为undefined则需要回头检查前面的配置步骤。

• 如果你需要部署项目到线上平台，记得在对应平台的环境变量配置面板中补充所有NEXT_PUBLIC_开头的变量，线上部署不会读取本地.env文件。

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