在 React 应用程序中隐式初始化 firebase答案

【问题标题】：Implicitly initializing firebase in a React app在 React 应用程序中隐式初始化 firebase
【发布时间】：2019-09-20 21:07:21
【问题描述】：

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

但是，在运行应用程序时，如果我尝试使用 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 (
  ...

任何指针？

【问题讨论】：

您能否检查：1) init.js 的内容是否正确？ 2) 如果您的firebase.functions().httpsCallable( 在init.js 的初始化之前以某种方式被调用？

标签： reactjs firebase create-react-app

【解决方案1】：

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

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

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

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

interface Window {
  firebase: any
}

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

【讨论】：