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

Question

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

来自文档： https://firebase.google.com/docs/functions/config-env ，以及我可以从 Stack 周围拼凑起来的内容，Firebase 不喜欢“环境变量”，而是使用“配置变量”。 所以我试图实现配置变量来代替 my.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

Answer 1

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

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

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