我终于找到了这个问题的答案。

我发现处理这个问题的最好方法React/nextjs是结合使用我最初问题中的想法#4 和#5。

正如所看到的在这里，firebase有一个firebase apps:sdkconfig在CLI该命令：

打印 Firebase 应用的 Google 服务配置。

因此，知道这一点，您可以添加一个脚本，npm以便在firebase每次构建站点时创建一个配置文件。由于它知道您当前在命令行上使用的是哪个 firebase 项目，因此它知道您在部署时要输出的配置版本。

然后，在您的 中package.json，您可以将其设置为运行。

  "scripts": {
   ...
   "build": "npm run getconfig && next build",
   "getconfig": "firebase apps:sdkconfig web --json > ./firebase-config.json",
   ...
  },

然后，在您firebase.js或您在应用程序中配置 firebase 的任何地方：

// Get the Firebase config from the auto generated file.
const firebaseConfig = require('./firebase-config.json').result.sdkConfig;

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp(firebaseConfig);

这在本地和云中都适用，除了您已经为切换正在使用的环境所做的工作之外，无需手动更改（即firebase use）

您可能需要调整它运行的 npm 脚本或其他小东西来满足您的需要，但这种通用设置对我来说非常适合production,staging和development环境。