使用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.
srccomponentsFirebasefirebase.js
Line 26:12:  'firebase' is not defined  no-undef     
srccomponentsItemsItemListContainer.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} />
})}  
</> 
)
}