React组件传参问题：无法接收父组件Products的props？

开发者阿泽

2026-6-16

问题分析与解决

你的问题出在三个核心点上，逐个梳理解决：

1. 路由详情页未传递产品数据

在App.jsx的路由配置中，/product/:id路径直接渲染<SingleProduct />，但这里没有传入任何product数据。当你点击列表链接跳转到详情页时，组件接收不到props，自然会打印undefined。

解决方式：
在详情页的SingleProduct组件中，通过路由参数获取产品id，再从数据源中匹配对应产品：

import { useParams } from 'react-router-dom';
import data from "../data";

const SingleProduct = () => {
  const { id } = useParams();
  // 注意路由id是字符串类型，需转数字匹配数据源中的id
  const product = data.find(item => item.id === parseInt(id));
  console.log(product);

  return (
    <div>
      <figure className='px-4 pt-4'>
        <img
          src={product?.image} // 用可选链避免产品未找到时的报错
          alt='产品图'
          className='rounded-xl h-64 md:h-48 w-full object-cover'
        />
      </figure>
    </div>
  )
}

2. 组件内部变量名错误

你在SingleProduct组件中解构的props是{ product }，但return里的img标签却用了prod.image——prod是未定义的变量，必须改成product.image，否则会直接抛出变量未定义的错误。

3. 混淆两种渲染场景

Products组件里的<SingleProduct product={prod} />其实是正确传递了props的，如果你在首页（Products页面）查看控制台，这里的SingleProduct会打印出正确的产品数据。但你大概率是在跳转到/product/:id详情页后查看的log，此时路由渲染的是未传props的SingleProduct，所以才会出现undefined。

总结：