React+TS组件传参报错：Property 'singlefooditem'不存在于FoodProps类型

错误1：FoodItem组件中提示“Property 'singlefooditem' does not exist on type 'FoodProps'.ts(2339)” #

你将FoodProps接口直接指定为FoodItem组件的props类型，但FoodProps仅定义了食品自身的数据字段（如名称、价格等），并未包含singlefooditem属性。而你在FoodItem组件内尝试访问props.singlefooditem，TypeScript类型检查会判定该属性不存在于FoodProps类型中，因此触发错误。

错误2：父组件中提示“Type '{ singlefooditem: FoodProps; key: string; }' is not assignable to type 'IntrinsicAttributes & FoodProps'.ts(2322)” #

父组件向FoodItem传递的props是{singlefooditem: 某FoodProps实例, key: ...}，但FoodItem的props类型被定义为FoodProps，该类型中不存在singlefooditem属性，TypeScript会判定传递的props结构与组件期望的类型不匹配，从而抛出错误。

核心问题是混淆了食品数据类型与组件props类型：

• FoodProps是单个食品的数据结构，并非FoodItem组件的props类型
• 你需要为FoodItem定义专属的props类型，示例如下：

  interface FoodItemProps {
    singlefooditem: FoodProps;
  }
  

  之后将FoodItem的props类型设置为FoodItemProps，父组件传递singlefooditem属性时就会符合类型要求，组件内部也能正常访问该属性。

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