尝试从 Firestore 数据库中提取多个项目时出现 React 错误

问：

我正在制作一个 React 应用程序，它连接到 Firebase 的 Firestore 来存储和检索一些数据。

这是我尝试提取信息的方式：

import { useEffect, useState } from "react";
import { db } from "../config/firebase";
import { getDocs, collection } from "firebase/firestore";

export default function Bookings() {
    const [bookingsList, setBookingsList] = useState([]);

    const bookingsCollection = collection(db, "bookings");

    useEffect(() => {
        const getBookingsList = async() => {
            try {
                const data = await getDocs(bookingsCollection);
                const filteredData = data.docs.map((doc) => ({
                    ...doc.data(), 
                    id: doc.id
                }));
                setBookingsList(filteredData);
            } catch(e) {
                console.error("Error with fetching the bookings: " + e);
            }
        };
        getBookingsList();
    }, [])

    return (
        <div>
            <h1>Bookings page</h1>
            {bookingsList.map((booking) => (
                <div>
                    <h4>Listing: {booking.listing}</h4>
                    <h4>Check In: {booking.check_in}</h4>
                </div>
            ))}
        </div>
    );
}

例如，当我尝试提取一条信息时，它就会起作用。但是，当我尝试如上所示提取多条信息时：我收到此错误：<h4>Listing: {booking.listing}</h4><h4>Listing: {booking.listing}</h4><h4>Check In: {booking.check_in}</h4>

对象作为 React 子对象无效（found： object with keys {seconds， nanoseconds}）。如果要呈现子项的集合，请改用数组。

我试图尽我所能解决这个问题，但目前我对 React 的了解非常有限，所以我没有成功。通过在线查找，我发现在这些情况下我们需要使用“map（）”方法，我已经看到它对其他人有用，但我不太明白为什么它对我不起作用。