React使用react-router useParams报错：无法解构undefined的product的title

问题根源 #

• 类型不匹配：useParams()返回的所有参数都是字符串类型，但你的产品数据里item.id大概率是数字（从列表组件渲染{item.id}的逻辑能推测），用===严格相等比较时，字符串和数字无法匹配，导致products.find()返回undefined，后续直接解构title就触发了错误。
• 未处理空值场景：就算参数类型匹配，也可能出现找不到对应产品的情况，直接解构不做判断肯定会报错。

修复步骤 #

1. 统一ID的类型比较 #

把productId转换成数字，或者把产品id转成字符串再做比较，二选一即可：

const SingleProducts = () => {
  const { productId } = useParams();
  // 方案1：将字符串参数转为数字（适用于产品id是数字的情况）
  const product = products.find((productg) => productg.id === Number(productId));
  
  // 方案2：将产品id转为字符串（适用于产品id是字符串的情况）
  // const product = products.find((productg) => String(productg.id) === productId);
  
  // 后续逻辑...
};

2. 添加空值判断，避免解构报错 #

两种处理方式，选你觉得顺手的：

方式一：用可选链+默认值兜底

const SingleProducts = () => {
  const { productId } = useParams();
  const product = products.find((productg) => productg.id === Number(productId));
  
  // 用空对象兜底，可选链获取title，不存在就显示默认文本
  const { title = '产品不存在' } = product || {};

  return (
    <section className="section product">
      <img src={product?.images} alt={title} /> {/* 图片也用可选链避免报错 */}
      <h3>{title}</h3>
      <h3>{product?.price ? `$${product.price}` : ''}</h3>
      <Link to="/products">返回产品列表</Link>
    </section>
  );
};

方式二：直接判断产品是否存在，提前返回提示

const SingleProducts = () => {
  const { productId } = useParams();
  const product = products.find((productg) => productg.id === Number(productId));
  
  // 找不到产品就直接返回提示
  if (!product) {
    return <div className="section">抱歉，该产品不存在</div>;
  }
  
  // 确认存在后再解构
  const { title, images, price } = product;

  return (
    <section className="section product">
      <img src={images} alt={title} />
      <h3>{title}</h3>
      <h3>${price}</h3>
      <Link to="/products">返回产品列表</Link>
    </section>
  );
};

3. 额外检查：路由配置是否正确 #

确保你的路由里正确定义了productId参数，比如：

// 路由配置示例
import { Routes, Route } from 'react-router-dom';
import SingleProducts from './components/SingleProducts';
import ProductItem from './components/ProductItem';

function App() {
  return (
    <Routes>
      <Route path="/products" element={<ProductItem />} />
      {/* 这里的:productId就是传给useParams的参数名，要和组件里的productId对应 */}
      <Route path="/products/:productId" element={<SingleProducts />} />
    </Routes>
  );
}

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