在 React App 中包含 firebase 时出现 TypeError

Posted 2023-02-22

【中文标题】在 React App 中包含 firebase 时出现 TypeError

【英文标题】：TypeError while including firebase in react App

【发布时间】：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",

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

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

【参考方案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 ;