React编译报错TypeError: Cannot read properties of undefined (reading 'img')求助

数据老陈

2026-10-1

报错原因及解决方案

这个报错的核心是你代码里读取img属性的前置对象items为undefined，可按以下顺序排查修复：

首先排查父组件传参是否正确
你可以在Product组件代码开头加一行console.log(items)，打开浏览器控制台看输出值，如果是undefined，说明父组件调用Product时要么传参名写错（比如父组件写的是传item而不是items），要么你遍历data.js数组时拿到了无效的空值项，因为你说其他产品正常，大概率是单条数据异常或者传参名不匹配。
给组件加兜底容错逻辑
两种方案选一种即可：
1. 给props设置默认值，把组件入参改成：
```
const Product = ({items = {}}) => {
```
就算没拿到合法的items参数，也会默认用空对象，不会抛出属性读取错误。
2. 用可选链操作符优化属性读取，把<Image src={items.img} />改成：
```
<Image src={items?.img} />
```
当items为undefined或null时会直接返回undefined，不会触发报错。