Props传递失败求助：TypeScript类型错误排查与修复

问题详情 #

子组件（ResultItem）的Props定义如下：

props: {
    data: {
      type: Object as PropType<FormatOrderItem>,
      default: () => {}
    }
}

在父组件中渲染子组件时出现TypeScript类型错误，代码：

<ElScrollbar>
  {Store.Record.map((item, index) => (
    <ResultItem status={form.status} key={index + '_KEY'} data={item} />
  ))}
</ElScrollbar>

错误提示：

TS2322: Type '{ status: 0 | 2 | 1 | null | undefined; key: string; value: { id: string; username: string; leagueId: number; leagueName: string; homeId: number; awayId: number; matchTime: number; sportType: number; ... 41 more ...; versionKey: string; }; }' is not assignable to type 'IntrinsicAttributes & Partial<{ data: FormatOrderItem; }> & Omit<Readonly<ExtractPropTypes<{ data: { type: PropType; default: () => {}; }; status: { ...; }; }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "data">'.
Property 'value' does not exist on type 'IntrinsicAttributes & Partial<{ data: FormatOrderItem; }> & Omit<Readonly<ExtractPropTypes<{ data: { type: PropType; default: () => {}; }; status: { ...; }; }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "data">'.

错误原因 #

核心问题是**Store.Record中的item结构与FormatOrderItem类型不匹配**：错误信息显示item包含value字段，但FormatOrderItem类型并不包含该字段，导致传递data={item}时类型不兼容。

解决方案 #

1. 传递正确的字段（最推荐） #

如果Store.Record的每个元素是包裹了实际数据的对象（结构为{ value: FormatOrderItem }），直接传递item.value即可匹配类型：

<ElScrollbar>
  {Store.Record.map((item, index) => (
    <ResultItem status={form.status} key={index + '_KEY'} data={item.value} />
  ))}
</ElScrollbar>

2. 显式类型断言（仅当结构确实匹配时使用） #

若确认item本身就是FormatOrderItem类型，但TypeScript无法自动推断，可通过类型断言强制转换：

<ElScrollbar>
  {Store.Record.map((item, index) => (
    <ResultItem status={form.status} key={index + '_KEY'} data={item as unknown as FormatOrderItem} />
  ))}
</ElScrollbar>

3. 完善子组件Props定义 #

确保子组件的status Prop类型与form.status的类型完全匹配，避免额外的类型冲突：

import { PropType } from 'vue';

// ResultItem组件的Props定义
props: {
  data: {
    type: Object as PropType<FormatOrderItem>,
    default: () => ({})
  },
  status: {
    type: [Number, null, undefined] as PropType<0 | 1 | 2 | null | undefined>,
    default: null
  }
}

4. 给Store.Record添加明确类型注解 #

如果Store.Record没有指定类型，TypeScript会推断为任意类型，导致item类型不确定。给其添加类型约束：

// 定义Record元素的类型
interface StoreRecordItem {
  value: FormatOrderItem;
  // 其他必填字段...
}

// 给Store.Record指定类型
Store.Record: StoreRecordItem[] = [];

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