如何在 React 代码中访问 Firebase 配置变量？答案

【问题标题】：How do you access Firebase config variables in React code?如何在 React 代码中访问 Firebase 配置变量？
【发布时间】：2021-04-29 15:02:44
【问题描述】：

我正在尝试从 Netlify 迁移到 Firebase 托管。我的所有 .env 环境变量在 Netlify 中运行良好，但现在 Firebase 似乎存在问题，托管几分钟后它们就消失了。

从文档：https://firebase.google.com/docs/functions/config-env 以及我可以从 Stack 周围拼凑起来的内容来看，Firebase 不喜欢“环境变量”，而是使用“配置变量”。所以我正在尝试实现配置变量来代替我的 .env 变量。我已经成功地能够：

设置变量： firebase functions:config:set someservice.key="THE API KEY" someservice.id="THE CLIENT ID"

获取变量： firebase functions:config:get

所以我知道变量保存在我的应用程序的配置变量中。我不能做的是在我的 React 代码中以与我能够使用的相同的方式访问它们，比如：

console.log(process.env.REACT_APP_FIREBASE_PROJECT_ID)

当我尝试在 React 中设置时，类似于文档：

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import 'firebase-functions';
admin.initializeApp();

我在浏览器控制台中收到以下错误：

======== WARNING! ========

firebase-admin appears to have been installed in an unsupported environment.
This package should only be used in server-side or backend Node.js environments,
and should not be used in web browsers or other client-side environments.

Use the Firebase JS SDK for client-side Firebase integrations

【问题讨论】：

标签： reactjs firebase environment-variables firebase-hosting

【解决方案1】：

我已经找出了问题所在。当我在本地使用firebase init 进行初始化时，我选择了一个从 github 自动更新的选项。 github repo 不包含我的 .env 文件，这就解释了为什么它一直消失。

为了解决这个问题，我再次运行 firebase init 并为自动 github 部署选择了“n”（否）。

其他警告是因为我正在阅读针对后端服务器的文档。 Firebase-Functions 与 React 无关，至少在这种情况下是这样。

【讨论】：