我正在将一个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

我得到的数组如下所示：

数据库当前如下所示：

有没有人有一个想法，或者可以告诉我正确的方向？提前感谢！