在 React App 中包含 firebase 时出现 TypeError答案

【问题标题】：TypeError while including firebase in react App在 React App 中包含 firebase 时出现 TypeError
【发布时间】：2022-01-20 23:19:34
【问题描述】：

App.js

import { useState, useEffect } from "react";
import "./styles.css";
import { Button, TextField } from "@mui/material";
import List from "./List";
import db from "./firebase.js";

export default function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");
  useEffect(() => {
    db.collection("todos").onSnapshot((snapshot) => {
      setTodos(snapshot.docs.map((doc) => doc.data().todo));
    });
  }, []);

  const addtodo = (event) => {
    setTodos([...todos, input]);
    event.preventDefault();
    setInput("");
    console.log(todos);
  };

  return (
    <>
      <div className="App">
        <h1>TODO LIST</h1>
        <form>
          <TextField
            value={input}
            onChange={(event) => setInput(event.target.value)}
            id="standard-basic"
            label="TODO"
            variant="standard"
            color="secondary"
          />
          <Button
            variant="contained"
            disabled={!input}
            type="submit"
            onClick={addtodo}
          >
            ADD TODO
          </Button>
        </form>
      </div>
      <ul>
        {todos.map((todo) => (
          <List text={todo} />
        ))}
      </ul>
    </>
  );
}

List.js

import React from "react";
import { ListItemButton, ListItemText } from "@mui/material";

function List(props) {
  return (
    <div>
      <ListItemButton component="a" href="#simple-list">
        <ListItemText primary={props.text} />
      </ListItemButton>
    </div>
  );
}

export default List;

firebase.js

    import * as firebase from "firebase/app";
import "firebase/firestore";

const firebaseApp = firebase.initializeApp({
  apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  authDomain: "todo-835e4.firebaseapp.com",
  projectId: "todo-835e4",
  storageBucket: "todo-835e4.appspot.com",
  messagingSenderId: "719788228877",
  appId: "1:719788228877:web:a517acaef495f8ae3b3044"
});

const db = firebaseApp.firestore();

export { db };

这是我得到的错误：

TypeError
firebase.initializeApp is not a function
$csb$eval
/src/firebase.js:4:29
  1 | import * as firebase from "firebase/app";
  2 | import "firebase/firestore";
  3 | 
> 4 | const firebaseApp = firebase.initializeApp({
    |                             ^
  5 |   apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  6 |   authDomain: "todo-835e4.firebaseapp.com",
  7 |   projectId: "todo-835e4",

我尝试了 stackoverflow 中给出的大多数解决方案，但仍然无法解决。我什至将 firebase 的版本更改为较旧的版本，但仍然没有解决方案。因此，如果有人可以查看我的代码并解决它，请在此处发布。

这里是代码框： https://codesandbox.io/s/todo-with-firebase-3fpup?file=/src/firebase.js

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

我的firebase.js和你的有点不一样，看看：

import firebaseApp from 'firebase/app';
import { firebase } from "./firebase"

    firebaseApp.initializeApp({
        apiKey: '',
        authDomain: '',
        //...
    })

export const db = firebaseApp.firestore();

【讨论】：

【解决方案2】：

firebase 进行了一些更新，它现在是模块化的，因此您只需将它们作为函数从 firebase 导入。你的代码应该是这样的。

Firebase.js

import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  authDomain: "todo-835e4.firebaseapp.com",
  projectId: "todo-835e4",
  storageBucket: "todo-835e4.appspot.com",
  messagingSenderId: "719788228877",
  appId: "1:719788228877:web:a517acaef495f8ae3b3044"
}
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp(); 

const db = getFirestore();
export default app;
export { db };

【讨论】：