我正在将一个Firestore数据库集合连接到一个Next.js应用程序。这个应用程序非常简单,因为我只是提取数据并将其显示在屏幕上。我现在在Firestore中有一个包含两个项目的集合,我试图将其连接到console.log()
以验证它是否正在连接。但是,当我这样做时,控制台显示了两个阵列,但它们似乎没有我数据库中的任何数据。
我目前正在使用以下代码将数据记录到控制台:
import React, { useEffect, useState } from 'react'
import {collection, getDocs} from 'firebase/firestore';
import db from '../firebase/config'
import { Box } from '@chakra-ui/react'
import ProductCard from './ProductCard'
const Products = () => {
const [products, setProducts] = useState([])
useEffect(() => {
;(async () => {
const colRef = collection(db, 'products')
const snapshots = await getDocs(colRef)
const docs = snapshots.docs.map((doc) => {
const data = doc.data()
data.id = doc.id
return data
})
setProducts(docs)
console.log(docs)
})()
}, [])
如果需要,我可以提供其余的代码。
我的firebase配置文件如下所示:
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: "---",
authDomain: "---",
projectId: "---",
storageBucket: "---",
messagingSenderId: "---",
appId: "---",
measurementId: "---",
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app)
export default db
我得到的数组如下所示:
数据库当前如下所示:
有没有人有一个想法,或者可以告诉我正确的方向?提前感谢!
1条答案
按热度按时间xzabzqsa1#
从您的数据库屏幕截图中,我们可以推断出
products
不是根集合,而是文档的子集合(实际上并不存在)。(参见底部的最后一个注解)所以你需要声明
CollectionReference
的完整路径(子)集合。我们不知道根集合的名称,我们只看到父文档(cocoworksco...
)的ID的一部分,但你应该声明子集合CollectionReference
,如下所示:请注意,声明子集合有许多不同的可能性:例如,
collection(db, 'rootCollection', 'cocoworksco...', 'products')
或collection(db, 'rootCollection', 'cocoworksco.../products');
也有效。还要注意的是,我们实际上并不确定子集合的路径是由三部分组成的,因为我们在截图中看不到完整的路径,可能更深,例如
rootCollection/doc1/subCol1/cocoworksco.../products
。