React组件运行报TypeError: Cannot read properties of undefined (reading 'username')

错误原因 #

核心是Message组件接收的message prop为undefined，执行message.username时尝试读取undefined的属性，直接触发TypeError。具体根因可分为两类：

1. 父组件传参结构不匹配：
   如果你的messages数组单条结构为{id, 发送者username, 消息内容message}，你在map时错误将消息内容单独解构传给了子组件，Message组件预期接收的message是包含username、message属性的对象，实际收到的是字符串类型的消息内容，若存在某条消息没有message字段，解构后的值就是undefined，直接触发报错。
2. 无异常兼容逻辑：
   代码没有做边界情况处理，只要传参异常就会直接崩溃，没有兜底逻辑。

解决方案 #

第一步：修正父组件传参逻辑 #

确认messages数组的单条结构，如果每条消息本身就包含发送者信息和内容，直接把完整消息对象传给Message组件即可：

<FlipMove>
  {
    messages.map((msg) => (
      <Message key={msg.id} username={username} message={msg}/>
    ))
  }
</FlipMove>

第二步：增加代码健壮性防护 #

给Message组件增加默认值和可选链，就算传参异常也不会直接崩溃：

const Message= forwardRef(({ message = {}, username}, ref)=> {
    // 可选链避免访问undefined属性
    const isUser = username === message?.username;
    return (
            <div ref={ref} className={`message ${isUser && 'message__user'}`}>
                <Card className={isUser ? "message__userCard" : "message__guestCard"}>
                <CardContent >
                    <Typography 
                    color="black"
                    variant="h5"
                    component="h2"
                    >
                        {message?.username}:{message?.message}
                    </Typography>
                </CardContent>
                </Card>
            </div>
            
    )
});

可选：过滤无效消息 #

如果messages数组可能存在空项，遍历前先做过滤：

<FlipMove>
  {
    messages.filter(item => item && item.message).map(({id , message}) => (
      <Message key={id} username={username} message={message}/>
    ))
  }
</FlipMove>

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