Next.js/React父子组件传参报错：TypeError读取screenName未定义

你遇到的错误：

TypeError: Cannot read properties of undefined (reading 'screenName')

问题出在父组件传参的属性名和子组件接收的属性名不匹配：

错误位置对比 #

• 父组件（pages/artist/[artistId].js）中传递参数：

  <ArtistHeader data={artist}/>
  

  这里传的props属性名是data

• 子组件（components/ArtistHeader.js）中接收参数：

  export default function ArtistHeader({ artist }) {
  

  这里期望接收的props属性名是artist

因为子组件找不到名为artist的props，所以artist变量是undefined，访问artist.screenName就会抛出TypeError。

两种修复方案 #

方案1：修改父组件的传参名（推荐，保持语义一致）

把父组件里的传参代码改成：

<ArtistHeader artist={artist}/>

方案2：修改子组件的接收名

把子组件的接收逻辑和内部引用全部改成data：

export default function ArtistHeader({ data }) {
  return (
    <header className={styles.artistContainer}>
      <p>{data.screenName}</p>
      <Image 
        className={styles.artistHeader}
        priority="true"
        src={data.artistMainImg}
        alt={data.screenName}
        width="1280px"
        height="200px"
        layout="intrinsic"
        objectPosition="center"
      />
    </header>
  )
}

额外建议 #

为了避免API返回数据为空时再次报错，建议在代码中添加可选链操作符（?.）做空值保护：

• 父组件中：{artist?.screenName}
• 子组件中：{data?.screenName} 或 {artist?.screenName}（根据最终采用的方案调整）

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