在React应用中隐式初始化Firebase

Question

我正在尝试将implicit initialization用于Firebase和React应用程序（使用CRA创建）结合起来，因为这似乎是确保无需为配置不同环境而过分担心的好方法。 / p>

但是，在运行应用程序时，如果我尝试使用firebase对象，则会收到错误Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

我的索引文件在应用程序文件之前包含Firebase文件，如果在Firebase提供的init中放置一个断点，则可以看到它正在初始化firebase对象。

App组件是CRA样板随附的组件：

mport React from 'react';
import firebase from 'firebase/app'
import 'firebase/functions'

import logo from './logo.svg';
import './App.css';

const App: React.FC = () => {

  const helloWorld = firebase.functions().httpsCallable('helloWorld')
  helloWorld().then(result => console.log({ result }))

  return (
  ...

有指针吗？

Answer 1

我做错了。 init脚本已被正确调用并创建了一个全局firebase对象，然后使用导入对其进行了覆盖。

我删除了组件中的两个导入，并更改了helloWorld声明：

const helloWorld = window.firebase.functions().httpsCallable('helloWorld')

然后，打字稿夹棉机抱怨firebase在Window上不存在，因此我添加了一个包含以下内容的global.d.ts文件：

interface Window {
  firebase: any
}

在某个时候，我会为它找出正确的类型，但这让我克服了问题。