使用 ReactJS 的 Firebase 9 编译错误

Question

我在我的 react 电子商务项目中使用 Firebase 9.5.0 将产品从我的 Firestore 数据库导入到我的 ItemListContainer 组件。我知道最近的 Firebase 更新使 v9 之前的 Firebase 线程无用，因为此后发生了很多变化，而且我无法通过文档弄清楚如何从 Firestore 数据库导入我的集合和文档。我在我的项目src 目录的Firebase 文件夹中创建了一个firebase.js。

我的firebase.js 使用各种在线资源：

import { initializeApp } from 'firebase/app';

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "(here is my api key)",
  authDomain: "reactcoder-17fc7.firebaseapp.com",
  projectId: "reactcoder-17fc7",
  storageBucket: "reactcoder-17fc7.appspot.com",
  messagingSenderId: "588405796332",
  appId: "(here is my app id)",
  measurementId: "(i dont know if this is sensitive info)"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export function getFirebase() {
    return app
}

export function getFirestore() {
    return firebase.firestore(app)
}

这是我的 ItemListContainer 组件尝试获取 Firestore 集合和文档：

import ItemList from "./ItemList";
import { useState, useEffect } from "react";
import Product from "../../product.json";
import {getFirestore} from "../Firebase/firebase"

const ItemListContainer = () => {


    const [data, setData] = useState([]);

    //i have found this useEffect online but pretty sure this firebase code doesnt work anymore.
    //this is a hook attempt at retrieving the firestore data
    //also cant figure out how to implement it in the context of my code/project
    useEffect(() => {
        setLoading(true);
        const db = getFirestore();
        const itemCollection = db.collection("Products");
        itemCollection.get().then((querySnapshot) => {
            if(querySnapshot.size === 0) {
                console.log("no results")
            }
            setItems(querySnapshot.docs.map(doc => doc.data()))
        }).catch((error) => {
            console.log("error searching item", error)
        }).finally(() => {
            setLoading(false)
        })
    }, [])

    return (
        <>
            <ItemList items={datos.Product} key={datos.id}></ItemList>
        </> 
    )
}

export default ItemListContainer

我觉得我无处可去，即使我解决了所有编译错误，我认为我不会成功地将 Firestore 数据库文档导入我的项目。我也无法为我的问题找到线程或文档，感觉自己搞得一团糟。

欢迎任何意见。提前致谢！

编辑：这是我的编译错误：

Failed to compile.

src\components\Firebase\firebase.js
  Line 26:12:  'firebase' is not defined  no-undef     

src\components\Items\ItemListContainer.js
  Line 13:9:   'setLoading' is not defined  no-undef   
  Line 20:13:  'setItems' is not defined    no-undef   
  Line 24:13:  'setLoading' is not defined  no-undef   

Answer 1

你可以试试这个，因为缺少某种变量。希望这会起作用

import ItemList from "./ItemList";
import { useState, useEffect } from "react";
import Product from "../../product.json";
import {getFirestore} from "../Firebase/firebase"
import * as firebase from "firebase"

const ItemListContainer = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        const db = getFirestore();
        const itemCollection = db.collection("Products");
        itemCollection.get().then((querySnapshot) => {
            if(querySnapshot.size === 0) {
                console.log("no results")
            }
            setData(querySnapshot.docs.map(doc => doc.data()))
        }).catch((error) => {
            console.log("error searching item", error)
        }).finally(() => {
            setLoading(false)
        })
    }, [])

    return (
        <>
      {data && data?.map((item)=>{
        return <ItemList items={item?.Product} key={item?.id} />
       })}  
        </> 
    )
}