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

How do you access Firebase config variables in React code?

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

从文档:https://firebase.google.com/docs/functions/config-env 以及我可以从 Stack 周围拼凑的内容来看,Firebase 不喜欢 'environment variables',而是使用 'config variables'。所以我正在尝试实现配置变量来代替我的 .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

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

为了解决这个问题,我再次 运行 firebase init 并为自动 github 部署选择了 'n'(否)。

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