Question

我尝试在我的反应应用中使用Firebase。

我有一个配置文件如下：

import * as firebase from 'firebase';

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DB_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const database = firebase.database();
const auth = firebase.auth()

export {firebase, auth, database };

当我尝试这个时，我收到的错误是：

FIREBASE致命错误：无法确定Firebase数据库网址。调用firebase.initializeApp（）时，请确保包含databaseURL选项。

我无法理解这个错误，因为我在初始化应用程序的调用中包含了配置。配置包括数据库URL。

如何初始化数据库？

Answer 1

您不需要if

周围的firebase.initializeApp(config);声明

  import * as firebase from 'firebase';

  const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DB_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
  }

  firebase.initializeApp(config);

一旦初始化应用程序，您就不需要导出这些对象，它应该可以在项目中使用而无需导出。

  const database = firebase.database();
  const auth = firebase.auth()

  export {firebase, auth, database };

Answer 2

在firebase.js中，当我删除了databaseURL：和process.env.FIREBASE_DATABASE_URL。之间的空格时，它起作用了。

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

Answer 3

不要多次初始化firebase。

https://github.com/firebase/firebase-functions/issues/228

Answer 4

同一问题。上下文：盖茨比-gatsby-node.js

由于某些原因，它像我的env db url一样dsnt。只需要对该值进行硬编码。

    const config = {
      apiKey: process.env.GATSBY_FIREBASE_API_KEY,
      authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
      databaseURL: "https://blabla.firebaseio.com",
      projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
      storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID
    }

它奏效了。

西亚

Answer 5

这里有同样的问题，但是将firebaseconfig放在componentDidMount()中之后，它将解决。

componentDidMount(){

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};
firebase.initializeApp(firebaseConfig);
const myitem = firebase.database().ref('items/').once('value',snapshot=>{
  console.log(snapshot.val())
})

}

Answer 6

重新启动开发服务器可解决此问题，如果您刚刚编写代码并尝试对其进行编译，则会引发此错误。因此，您可以尝试退出批处理作业，然后再次重新启动服务器。

Answer 7

我也遇到了与firebase相关的未捕获错误。实际上，当我们使用环境变量时，它们不应传递到作为客户端javascript文件的bundle.js文件中。我们可以使用“ DefinePlugin”（这是一个Webpack插件，应将这些环境变量手动传递到bundle.js文件中）

Answer 8

似乎您的代码很好。只需打印并检查process.env.FIREBASE_DATABASE_URL及其与firebase控制台中提到的完全相同。（如果您使用的是create react应用，请不要忘记将REACT_APP_添加到所有环境变量https://create-react-app.dev/docs/adding-custom-environment-variables/中）

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';

const appConfiguration = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
    measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

export const session_type = firebase.auth.Auth.Persistence.LOCAL;

export const app = firebase.initializeApp(appConfiguration);
export const auth = app.auth();
export const db = app.firestore();
export const storage = app.storage();

将完成任务。

Answer 9

我认为这是复制粘贴错误：）

.p文件中的

REACT_APP_DATABASE_URL

但是我用 process.env.REACT_APP_DB

请检查它，效果很好

import firebase from 'firebase/app'
import 'firebase/database';
const config = {
    apiKey: process.env.REACT_APP_APIKEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    projectId: process.env.REACT_APP_PID,
    storageBucket: process.env.REACT_APP_SB,
    messagingSenderId: process.env.REACT_APP_SID,
    appId: process.env.REACT_APP_APPID,
    measurementId: process.env.REACT_APP_MID
};


firebase.initializeApp(config);
const database = firebase.database();

export { database };
export default firebase;

Answer 10

我只是粘贴了硬编码配置，它对我有用

const config = {
  apiKey: "AIzaSyBA2C8S7****************-gCw",
  authDomain: "e**********-2aa4c.firebaseapp.com",
  databaseURL: "https://************.firebaseio.com",
  projectId: "ea********2aa4c",
  storageBucket: "ea************2aa4c.appspot.com",
  messagingSenderId: "1765********26",
}

Answer 11

我知道这是一个旧线程，但我从昨晚开始就面临这个问题，我花了几个小时绞尽脑汁找出我的代码出了什么问题。澄清一下，除了 firebase 数据库 url 之外，所有 .env 变量都被 cra 读取。

我尝试了以下步骤：

检查了拼写错误，包括 .env 变量以及网址是否正确。
我尝试将 .env 变量打印到控制台和屏幕，但是当我这样做时，所有 env 变量的值都未定义。这真的不应该发生，我很困惑。
尝试了各种方法，将 FIREBASE_DATABASE_URL 的 .env 变量名称更改为 XYZ 之类的随机名称（只是为了使其以某种方式工作），因为我认为某些 env 变量由于名称相同而发生冲突，但仍然没有用。
唯一可行的方法是对其进行硬编码，但这是一种黑客行为，而不是解决方案。

需要注意的是第 2 点。即使在硬编码后打印环境变量时，结果在控制台上也是“未定义”。所以没有错，代码应该可以工作，但为什么不行？出于纯粹的随机性，我打开了任务管理器（Windows）。我注意到节点服务器正在运行，但我已经关闭了反应开发服务器！我杀死了进程并重新启动了反应服务器，现在它可以工作了。

问题是在后台运行过时的节点服务器，代码没有任何问题。这也解决了第 2 点，console.log 语句现在正在工作。

这可能不是每个人的问题的解决方案，但对于 3 年前提问者的问题可能是或曾经，因为他们的代码在语法上没有任何错误。

Firebase DatabaseURL - 配置firebase

11 个答案: