如何正确标注组件Props类型？遇类型无法赋值给IntrinsicAttributes & PropsT错误

错误原因 #

你犯了两个关键错误：

1. React组件的参数必须是一个props对象，而不是直接接收数组/元组。你现在把组件写成(data: PropsT)，相当于期望整个props就是这个元组，但实际使用时你传的是{ data: [...] }这种对象结构，类型自然不匹配。
2. PropsT被定义成了元组类型[{ title: string }]，但你实际需要的是包含data属性的props对象类型。

修复方案 #

方案1：规范定义Props类型（推荐）

把PropsT改成包含data属性的对象类型，组件接收这个props对象：

// 修正Props类型
type PropsT = {
  data: { title: string }[];
};

// 组件接收props对象，可直接使用或解构
const ChildComp = ({ data }: PropsT) => {
  return <>{data[0].title}</>;
};

方案2：保留元组类型（不推荐，不符合React规范）

如果一定要用元组作为组件参数，使用组件时不能传{ data: [...] }，而是要把元组直接作为props传递（这种写法不规范，不建议在实际项目中使用）：

// 组件定义不变
type PropsT = [{ title: string }];
const ChildComp = (data: PropsT) => {
  return <>{data[0].title}</>;
};

// 使用组件时的写法
<ChildComp {...[{ title: "示例标题" }]} />

总结 #

React组件的props设计就是基于对象结构的，这样可以清晰传递多个属性，建议始终使用方案1的规范写法，避免类型混淆和不规范的组件使用方式。

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