TypeError：无法读取未定义的属性（读取“profilePic”），做出反应

Question

我 我正在尝试从 Firestore 云中获取数据，但出现错误“TypeError：无法读取未定义的属性（正在读取'profilePic'）” 为什么说是未定义，却是已定义？

  import React, {useState, useEffect} from 'react';
  import Post from './Post';
   import db from '../firebase';
  
  const Feed = ({profilePic, message, timestamp, username, image}) => {
  const [posts, setPosts]  =useState([]);

  //realtime database connection
  useEffect(() => {
  db.collection('posts')
 .orderBy('timestamp','desc')
 .onSnapshot((snap) => (
  setPosts(snap.docs.map((doc) => ({...doc.data(), id: doc.id })))
  ));
   }, []);
    
   return (
    <div className='feed'>
      {posts.map((post)=>(
        <Post
        key={post.id}
        profilePic={post.data.profilePic}
        message={post.data.message}
        timestamp={post.data.timestamp}
        username={post.data.username}
        image={post.data.image}
        />
      ))}
    </div>
   );
  }

  export default Feed;

Answer 1

您正尝试从 未定义 的 posts.data 中读取 profilePic。此值在 useEffect 方法中设置。

我认为问题出在这一行

setPosts(snap.docs.map((doc) => ({...doc.data(), id: doc.id }))).

试试这个：将此代码的结果分配到一个单独的变量中，然后在控制台中查看该变量的值。检查变量中的数据是否创建正确。

useEffect(() => {
  db.collection('posts')
 .orderBy('timestamp','desc')
 .onSnapshot((snap) => {
   let p = snap.docs.map((doc) => ({...doc.data(), id: doc.id }));
   console.log("POSTS", p) // check the value in console
   setPosts(p);
  }));
   }, []);

Answer 2

试试这个： setPosts(snap.docs.map((doc) => ({ id: doc.id, data: doc.data()})))

并添加可选链接

{posts?.map((post)=>(
    <Post
    key={post.id}
    profilePic={post.data.profilePic}
    message={post.data.message}
    timestamp={post.data.timestamp}
    username={post.data?.username}
    image={post.data?.image}
    />
  ))}