TypeScript React 组件Props类型校验失效 传入错误类型无报错

问题原因 #

• 属性名不匹配：ProductListItem定义的必填属性为name，调用组件时实际传的是title，相当于未给必填的name属性传值。
• 显式标注any类型关闭校验：遍历allProducts时给参数product标注了any类型，TypeScript对any类型会跳过所有类型检查，自然不会触发属性名错误、类型不匹配的报错。
• 部分场景下如果tsconfig.json未开启strict严格模式，也会导致必填属性校验规则不生效。

修复方案 #

1. 修正组件调用时的属性名，和定义的Props保持一致，将title={product.itemName}改为name={product.itemName}。
2. 移除product的any类型标注，allProducts本身已经声明为Array<Product>类型，TypeScript会自动推断遍历项product为Product类型，不需要额外标注：

// 修正后的遍历代码
const productsTodisplay = allProducts.map((product) => (
  <ProductListItem key={product._id} name={product.itemName} />
));

3. 检查tsconfig.json的compilerOptions配置，确保开启"strict": true，保证全量类型校验规则生效。

修改完成后TypeScript就会正常触发报错：product.itemName是string类型，与ProductListItem要求的name: number类型不匹配，符合预期的校验效果。如果业务侧name本来就应该接收字符串，可以直接把组件Props定义中的name: number改为name: string即可解决报错。

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