React项目登录后首页空白，出现profilePicUrl空属性读取错误

错误原因 #

报错Uncaught TypeError: Cannot read properties of null (reading 'profilePicUrl')的核心原因是：你循环的posts数组中，存在某条post的author字段为null。当前代码里的post?.author.profilePicUrl仅对post做了可选链判断，但如果post存在但post.author是null，后续访问.profilePicUrl依然会触发读取null属性的错误，最终导致首页渲染失败空白。

修复方案 #

1. 补全可选链判断 #

将图片的src属性修改为对author也做可选链判断，确保任何环节为null/undefined时都不会报错：

src={post?.author?.profilePicUrl}

2. 添加默认头像兜底 #

为了避免图片加载失败的视觉问题，可以设置一个默认头像作为备选：

src={post?.author?.profilePicUrl || '/path/to/default-avatar.png'}

将/path/to/default-avatar.png替换为你项目中实际的默认头像路径即可。

3. 提前过滤无效数据 #

在渲染前先过滤掉author无效的post，避免渲染无意义的内容：

{posts.filter(post => post?.author).map((post) => {
  // 原渲染逻辑
})}

4. 排查后端数据问题 #

还要确认后端返回的posts数据是否正确关联了用户信息，部分post的author为null可能是后端数据关联逻辑出错导致的，需要同步排查接口返回的数据是否符合预期。

修改后的代码片段 #

return (
  <div className='home-container'>
    {posts.filter(post => post?.author).map((post) => {
      return (
        <div className='card home-card' key={post._id}>
          <h5 style={{ padding: '10px' }}>
            <img
                className='profilePic'
                src={post?.author?.profilePicUrl || '/default-avatar.png'}
                alt='Profile Picture'
            />
            <Link
                to={
                  post.author._id !== state._id
                  ? '/profile/' + post.author._id
                  : '/profile'
                }>
              {post.author.fullName}
            </Link>

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