使用ReactJS从单个Firestore文档中获取数组操作报错如何解决？

问题原因 #

报错核心有两点：

1. 你将Firestore返回的myList数组整体作为单个元素存入了watchlistMovies，导致state变成二维数组，map遍历拿到的item是整个数组而非单条数据，访问item下的字段自然报错
2. useEffect依赖项为空，直接使用watchlistMovies的旧值会触发闭包陷阱，获取不到最新的state值

修复后代码 #

const Watchlist = () => {
    const [watchlistMovies, setwatchlistMovies] = useState([]);
    const {currentUser} = useAuth()
    const usersCollectionRef = collection(db,"users")
    const docRef = doc(db,"users",currentUser.uid)
    
    useEffect(() => {
        // 未获取到用户时不执行请求避免报错
        if(!currentUser) return
        const getWatchListMovies = async () => {
            const data = await getDoc(docRef)
            if (data.exists()) {
                const myList = data.data().myList || []
                // 函数式更新规避闭包问题，同时展开myList的每一项存入state，避免生成二维数组
                setwatchlistMovies(prev => [...prev, ...myList])
            } else {
                console.log("empty");
            }
        }
        getWatchListMovies();
    }, [currentUser]) // 补充currentUser依赖，用户状态变化时自动重新请求
    
    // 访问数组元素加可选链，避免数组为空时报错
    console.log(watchlistMovies[0]?.media_type);

    return (
        <div className="content-page-area">
            <h1 className="trending-text">  My Watchlist </h1>
           
            <Container className="watchlist-container">
            <hr/>
            {/* 加可选链避免数据未返回时调用map报错，补充key属性符合React列表渲染要求 */}
            {watchlistMovies?.map(
            (item) => (
                <ListContent
                key={item.media_id}
                item_poster={item.poster_url}
                item_title={item.media_title}
                item_year={item.release_year}
                item_rating={item.media_rating}
                item_type={item.media_type}
                item_id={item.media_id}
                />
            )
            )}
            </Container>
            <br/>
            <br/>
            <br/>
        </div>
    )
}

export default Watchlist

补充说明 #

你之前注释的watchlistMovies.myList[0]写法本身是错误的：你已经把myList的内容全部存入了watchlistMovies数组，直接访问数组元素即可，不需要再加myList层级。

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