React/NextJS路由prop透传至孙组件Link组件不生效问题求助

数据老陈

2026-9-26

问题根因

该报错和NextJS本身无关，属于跨组件透传属性时的参数匹配错误，99%的场景是某一层组件传递/接收属性时命名不匹配、或者漏传参数导致。

排查&解决步骤

1. 逐层检查属性名匹配

三层组件的属性传递必须严格对应命名，示例正确写法如下：

CardsList层调用Card时的属性名，必须和Card组件接收的参数名完全一致
Card层调用Button时的属性名，必须和Button组件接收的参数名完全一致

// 示例：CardsList组件
export default function CardsList({ listData }) {
  return (
    <div>
      {listData.map(item => (
        // 传递给Card的参数名必须和Card接收的一致
        <Card key={item.id} link={item.articleUrl} btnText={item.buttonText} />
      ))}
    </div>
  )
}

// 示例：Card组件
// 此处必须正确解构上层传递的link、btnText参数，不能漏写、不能拼错
export default function Card({ link, btnText }) {
  return (
    <div className="card">
      {/* 传递给Button的参数名必须和Button接收的一致，Button要的是link、text，所以对应传值 */}
      <Button link={link} text={btnText} />
    </div>
  )
}

2. 增加防御性判断避免偶发数据异常

如果存在列表中个别条目没有链接字段的场景，在Button组件增加兜底逻辑即可：

export default function Button({ text, link }) {
  // 空值兜底，避免undefined传入Link组件
  const validHref = link ?? '#'
  return (
    <Link href={validHref}>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

注：如果使用NextJS 13及以上版本的App Router，passHref属性已经废弃无需添加。

3. 快速定位问题层级

如果按上述步骤修改后仍有问题，在每一层组件的开头打印对应参数，即可快速定位参数丢失的位置：

在CardsList中打印要传给Card的对应链接字段，确认源数据有值
在Card组件开头打印接收到的link参数，确认成功拿到上层传值
在Button组件开头打印接收到的link参数，确认最终入参正确

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