React/TypeScript项目用Redux Thunk时报Products.find is not a function如何解决

• 核心问题是调用数组方法的目标不是数组：你当前从productDetail reducer取到的product字段初始值是空对象{}，调用productsDetailActions后接口返回的也是单个商品对象，两个阶段都不是数组类型，自然没有find、map这类数组专属方法。
• 首次渲染优先级高于异步请求：Redux Thunk的异步请求是在组件挂载后才触发的，首次渲染时用的是reducer的初始值，此时就会直接执行Products.find触发报错，哪怕后续异步请求返回了正确数据也不会执行到后续逻辑。
• 逻辑冗余：你调用的productsDetailActions本身就是按传入的id请求单个商品详情，接口返回的结果直接就是你要找的目标商品，完全不需要额外调用find方法过滤。
• 无法访问对象初始值的问题是因为初始对象结构不匹配：你productDetail的初始值是{product:{}}，如果product里的嵌套字段（比如你提到的Hats）没有提前定义，直接访问就会得到undefined。

1. 直接使用返回的详情数据，删除无效的find逻辑
   删掉组件中这段错误代码：

const product = Products.find((item: any) => {
 return  item._id === match.params.id
})

后续渲染直接用Products即可，配合可选链?.做空值判断，比如把所有product && product?.xxx改成Products?.xxx。
2. 若确实需要从商品列表过滤目标商品，从对应reducer取数组数据
如果你是想从全局的商品列表中筛选对应id的商品，要从productReducers对应的store节点取值（注意节点名要和你注册reducer时的命名一致）：

const products = useSelector((state: any) => state.products.products)
const product = products?.find?.(item => item._id === match.params.id)

3. 补全类型定义提前拦截错误
   不要大量使用any类型，给Redux state、接口返回值定义明确的类型，TypeScript会在开发阶段直接提示类型不匹配的问题，不用等到运行时才报错。
4. 调用方法前先做类型判断
   如果不确定拿到的值是不是数组，先做类型校验再调用数组方法：

const product = Array.isArray(Products) ? Products.find(item => item._id === match.params.id) : undefined

5. 补全对象初始值结构
   如果需要访问对象的嵌套字段，在reducer的初始值里提前定义好对应结构，避免访问undefined的子字段报错。

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