Javascript TypeError:comments.map不是instagram克隆的函数

我是ReactJs的初学者，我正在开发一个instagram克隆，在stackoverflow和google中进行了大量搜索之后，我发现了这个错误，现在无法修复

错误：

TypeError:comments.map不是函数

{comments.map((comment) => (

以下是所有代码：

import React, { useEffect, useState } from 'react';
import './Post.css'
import { db } from './firebase'
import Avatar from '@material-ui/core/Avatar'
import firebase from 'firebase'

function Post({ postId, user, username, caption, imageUrl }) {
    const [comments, setComments] = useState([])
    const [comment, setComment] = useState('')

    useEffect(() => {
        let unsubscribe;
        if (postId) {
            unsubscribe = db
            .collection("posts")
            .doc(postId)
            .collection("comments")
            .orderBy('timestamp', 'desc')
            .onSnapshot((snapshot) => {
                setComments(snapshot.docs.map((doc) => doc.data()));
            })
        }

        return () => {
            unsubscribe();
        };
     }, [postId]);

    const postComment = (event) => {
        event.preventDefault();

        db.collection("posts").doc(postId).collection("comments").add({
            text: comment,
            username: user.displayName,
            timeStamp: firebase.firestore.FieldValue.serverTimestamp()
        });
        setComment('');
    }

    return (
        <div className="post">
            <div className="post__header">
                <Avatar className="post__avatar"
                alt="RafehQazi"
                src="static/images/avatar/1.jpg"/>
            
            <h3>{username}</h3>

            </div>
            
            <img className="post__image" src={imageUrl} alt=""/>
            <h4 className='post__text'><strong>{username} </strong> {caption} </h4>

            <div className="post__comments">
                {comments.map((comment) => (
                    <p>
                        <strong>{comment.username}</strong> {comment.text}
                    </p>
                ))}
            </div>

            <form className="post__commentBox">
                <input 
                    type="text"
                    className="post__input"
                    placeholder="Add a comment..."
                    value={comment}
                    onChange={(e) => setComments(e.target.value)}
                />
                <button
                className="post__button"
                
                type="submit"
                onClick={postComment}
                >
                Post</button>
            </form>

        </div>
    ) 
}

export default Post

import React，{useffect，useState}来自“React”；
导入“./Post.css”
从“/firebase”导入{db}
从“@material ui/core/Avatar”导入化身
从“firebase”导入firebase
函数Post（{postId，用户，用户名，标题，imageUrl}）{
const[comments，setComments]=useState（[]）
const[comment，setComment]=useState（“”）
useffect（（）=>{
让我们退订；
如果（已发布）{
退订=分贝
.收集（“员额”）
.doc（posted）
.收集（“评论”）
.orderBy（'timestamp'，'desc'）
.onSnapshot（（快照）=>{
setComments（snapshot.docs.map（（doc）=>doc.data（））；
})
}
return（）=>{
取消订阅（）；
};
}，[posted]）；
const post comment=（事件）=>{
event.preventDefault（）；
db.收款（“posts”）.单据（postId）.收款（“评论”）.添加({
案文：评论，
用户名：user.displayName，
时间戳：firebase.firestore.FieldValue.serverTimestamp（）
});
setComment（“”）；
}
返回(
{username}
{username}{caption}
{comments.map（（comment）=>(

{comment.username}{comment.text}

))}
setComments（e.target.value）}
/>
邮递
) 
}
导出默认帖子

您正在为数组设置字符串

注释

<input 
                    type="text"
                    className="post__input"
                    placeholder="Add a comment..."
                    value={comment}
                    onChange={(e) => setComments(e.target.value)}
                />

setComments（e.target.value）}
/>

将此setComment替换为setComment