在这里，我试图从我的firebase显示所有数据到我的文章页面，但我得到了这种类型的错误：
TypeError：无法读取未定义的属性（阅读“map”）
这是我的Feed.js，它从firebase获取所有数据。

import { SparklesIcon } from '@heroicons/react/outline'
import React, { useEffect, useState } from 'react'
import Input from './Input'
import Post from './Post'
import { collection, onSnapshot, orderBy, query } from 'firebase/firestore';
import { db } from '@/firebase';

export default function Feed() {
    const [posts, setPosts] = useState();
    useEffect(
        () => 
            onSnapshot(
                query(collection(db, "posts"), orderBy("timestamp", "desc")), 
                (snapshot) => {
                    setPosts(snapshot.docs);
                }
            ),
        []
    );
  return (
    <div className="xl:ml-[370px] border-1 border-r border-l border-r-gray-200 xl:min-w-[576px] sm:ml-[73px] flex-grow max-x-xl">

        {/* Home nav */}
        <div className="flex items-center py-3 px-3 sticky top-0 z-50 bg-white border-b border-gray-200">
            <h2 className="text-lg sm:text-xl font-bold cursor-pointer">Home</h2>
            <div className="hoverEffect flex items-center justify-center px-0 ml-auto w-9 h-9">
                <SparklesIcon className="h-5" />
            </div>
        </div>

        {/* Input */}
        <Input />

        {/* Post */}
        {posts.map((post) => (
            <Post key={post.id} posts={post} />
        ))}
    </div>
  )
}

字符串
并且，我希望所有数据都显示到Post.js中
下面是Post.js的代码

import { ChartBarIcon, ChatIcon, DotsHorizontalIcon, HeartIcon, ShareIcon, TrashIcon } from '@heroicons/react/outline'
import Image from 'next/image'
import React from 'react'

export default function Post({ post }) {
  return (
    <div className="flex p-3 cursor-pointer border-b border-gray-200">

        {/* user-img */}
        <Image
            src={post.userImg}
            alt="img-user"
            className="w-11 h-11 rounded-full mr-4 object-cover"
            width="50"
            height="50"
        >
        </Image>

        {/* right-side */}
        <div>
            {/* header */}
            <div className="flex items-center justify-between">
                {/* post-user-info */}
                <div className="flex items-center justify-between space-x-2">
                    <h4 className="font-bold text-[15px] sm:text-[16px] hover:underline">{post?.name}</h4>
                    <span className="text-sm sm:text-[15px] text-gray-500">@{post?.username} &#8226;</span>
                    <span className="text-sm sm:text-[15px] text-gray-500 hover:underline">{post?.timestamp}</span>
                </div>

                {/* dot-icon */}
                <DotsHorizontalIcon className="h-10 hoverEffect w-10 hover:bg-sky-100 hover:text-sky-500 p-2" />
            </div>

            {/* post-text */}
            <p className="text-gray-800 text[15px sm:text-[16px] mb-2">{post?.text}</p>

            {/* post-img */}
            <Image
                src={post?.image}
                width="500"
                height="500"
                alt="post-img"
                className="rounded-2xl mr-2 w-auto"
            >
            </Image>

            {/* icons */}
            <div className="flex justify-between text-gray-500 p-2">
                <ChatIcon className="h-9 w-9 hoverEffect p-2 hover:bg-sky-100 hover:text-sky-500"/>
                <TrashIcon className="h-9 w-9 hoverEffect p-2 hover:bg-red-100 hover:text-red-500"/>
                <HeartIcon className="h-9 w-9 hoverEffect p-2 hover:bg-red-100 hover:text-red-500"/>
                <ShareIcon className="h-9 w-9 hoverEffect p-2 hover:bg-green-100 hover:text-green-500"/>
                <ChartBarIcon className="h-9 w-9 hoverEffect p-2 hover:bg-sky-100 hover:text-sky-500"/>
            </div>
        </div>
    </div>
  )
}

型