修复React+Firebase开发中posts.map is not a function报错

报错Uncaught TypeError: posts.map is not a function的触发逻辑非常明确：只有数组类型才支持map方法，你代码首次渲染时posts的值是空字符串''，不属于数组，调用方法直接报错。
具体问题点：

• 状态初始化错误：const [posts, setPosts] = useState('')把初始值设成了空字符串，组件第一次挂载执行渲染逻辑时，Firebase的onSnapshot异步监听还没返回数据，此时执行posts.map()就会触发类型错误
• 存在内存泄漏风险：onSnapshot绑定的实时监听没有在组件卸载时解绑，长期运行会占用多余内存

1. 将posts的初始状态从空字符串修改为空数组[]，保证首次渲染时map方法有合法的调用对象
2. 在useEffect的回调中返回onSnapshot生成的取消监听函数，组件卸载时自动清理监听事件

修复后的可运行代码：

import React, { useState, useEffect } from 'react';
import "./Post.css";
import Posts from "./Posts.js";
import { getFirestore } from "firebase/firestore";
import { collection, onSnapshot } from "firebase/firestore";
import { useNavigate } from "react-router-dom";
import ImageUpload from "./ImageUpload.js";

function Post( {user} ) {
    const db = getFirestore();
    const navigate = useNavigate();
    // 修正初始状态为数组类型
    const [posts, setPosts] = useState([]);
    const colRef = collection(db, 'posts');

  useEffect(()=>{
    // 注册实时监听，拿到取消监听的方法
    const unsubscribe = onSnapshot(colRef,(snapshot) => {
        setPosts(
            snapshot.docs.map((doc) => ({
                post: doc.data(),
                id: doc.id
            }))
        );
    });
    // 组件卸载时执行清理
    return () => unsubscribe();
  }, []);

    return (
        <div className = "post">
            <ImageUpload username = {user?.displayName} />
            {
                posts.map(({id, post}) => (
                    <Posts 
                        key = {id} 
                        postId = {id} 
                        origuser = {user?.displayName}
                        username = {post.username}
                        userId = {user.uid}
                        caption =  {post.caption}
                        imageUrl = {post.imageUrl}
                        noLikes = {post.noLikes}
                    />
                ))
            }
        </div>
    )
}

export default Post

后续遇到X.map is not a function类报错，直接在调用map前加一行console.log(Array.isArray(X), X)打印值和类型，就能快速定位是不是类型不匹配的问题。

内容的提问来源于stack exchange，提问作者Santi