React项目ProductScreen组件报Cannot read 'image' of undefined错误

错误原因 #

核心原因是 products.find() 没有匹配到符合条件的商品，返回了 undefined，后续代码直接访问 undefined.image 触发类型错误。常见触发场景如下：

• React Router 版本不兼容：如果你使用的是 React Router v6 及以上版本，组件默认不再注入 match 属性，match.params.id 无法正确拿到路由参数，导致匹配条件失效。
• id 类型不匹配：products 数组中商品的 _id 是数字类型，而路由参数 id 是字符串类型，用全等运算符 === 对比时会匹配失败。
• 对应 id 的商品不存在：products 数组中没有对应传入 id 的商品数据。

可行修复方案 #

• 方案1：适配 React Router 版本，正确获取路由参数
  如果是 React Router v6+，替换原有的 match 参数获取方式，改用 useParams 钩子，同时添加兜底判断避免空值报错：

import React from 'react'
import { Link, useParams } from 'react-router-dom' // 新增导入useParams
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'


function ProductScreen() {
    const { id } = useParams() // 用useParams获取路由id
    // 统一id类型对比，避免类型不同匹配失败
    const product = products.find((p) => String(p._id) === String(id)) 

    // 空值前置兜底，匹配不到商品时直接返回提示
    if (!product) {
        return <div className="text-center mt-5"><h2>未找到对应商品</h2></div>
    }

    // 其余原渲染逻辑保持不变
    return (
        <div>
            <Link to='/' className='btn btn-light my-3'>Go Back</Link>
        <Row>
            <Col md={6}>
                 <Image src={product.image} alt={product.name} fluid />
            </Col>
            {/* 其余原有代码 */}
        </Row>
    </div>
);
}

• 方案2：属性访问添加兜底
  不想加前置判断的话，可以在所有访问 product 属性的位置使用可选链运算符?.，避免 undefined 报错：

<Image src={product?.image} alt={product?.name} fluid />
<h3>{product?.name}</h3>
<Rating value={product?.rating} text={`${product?.numReviews} reviews`} color={'#f8e825'} ></Rating>
{product?.countInStock > 0 ? 'In Stock' : 'Out of Stock'}

• 隐藏问题修复
  你提供的代码还有两个问题需要修正，避免后续触发其他报错：
  1. 模板字符串拼写错误：{'${product.numReviews} reviews'} 应该用反引号包裹，改为 `${product.numReviews} reviews`
  2. 属性名拼写错误：product.countInStok 拼写错误，应该为 countInStock

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