ReactJS @mui/material Typography子元素类型错误求助

问题原因 #

你代码中discussion.comments是CommentType类型的数组，但Material-UI的Typography组件要求children必须是ReactNode类型（字符串、数字、React元素等合法的React渲染内容），直接传入数组会触发TypeScript类型校验失败，导致yarn build无法完成。

针对不同需求的解决办法 #

需求1：仅显示评论数量

如果和旁边的浏览量一样，只需要展示评论的总数，直接取数组的length属性即可：

<SmsIcon className={classes.actions} />
<Typography fontSize={[10, 14]} ml={1} className={classes.actions}>
  {discussion.comments.length}
</Typography>

若discussion.comments可能为undefined，可以增加空值处理避免报错：

{discussion.comments?.length ?? 0}

需求2：渲染每条评论的内容

如果需要展示所有评论的具体内容，需要遍历comments数组，为每个评论生成合法的React元素，同时替换原有的单个Typography容器：

<SmsIcon className={classes.actions} />
<Box ml={1}>
  {discussion.comments.map((comment) => (
    <Typography 
      key={comment.id} 
      fontSize={[10, 14]} 
      className={classes.actions}
      mb={1}
    >
      {comment.content}
    </Typography>
  ))}
</Box>

• 必须给每个遍历出的元素添加唯一key（推荐使用评论的id）
• 用Box或其他容器组件包裹整个评论列表，避免直接将数组传入单个Typography的children
• 若discussion.comments可能为undefined，使用可选链处理：

  {discussion.comments?.map((comment) => (/* ... */))}
  

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