React+TypeScript向子组件传递接口类型属性报错，求解析

核心问题是子组件的Props类型定义和实际接收的Props结构不匹配：

你定义的Foo接口是{ bar: string }，但给Child组件标注的Props类型是Foo——这意味着TypeScript认为Child组件接收的props应该直接包含bar字段，而非一个名为foo的字段。但实际你在父组件给Child传递的是foo={fooObject}，子组件收到的props结构是{ foo: Foo }，和标注的Foo类型完全不符，因此触发了两处错误：

1. 父组件传参时，{ foo: Foo }无法赋值给IntrinsicAttributes & Foo类型（因为Foo里没有foo属性）
2. 子组件解构{ foo }时，Foo类型中不存在foo属性

修正方案一：匹配实际Props结构定义接口 #

如果需要子组件接收foo字段，重新定义对应Props接口：

// 定义子组件实际接收的props类型
interface ChildProps {
  foo: Foo;
}

interface Foo {
  bar: string;
}

const Child = ({ foo } : ChildProps) => {
  console.log(foo.bar);
  return <Text>Hello World</Text>;
}

const TestPage = () => {
  const fooObject : Foo = { bar: 'something' };
  return <Child foo={fooObject} />;
}

修正方案二：直接传递Foo类型的属性 #

如果需求是子组件直接使用bar字段，调整传参和解构逻辑：

interface Foo {
  bar: string;
}

const Child = ({ bar } : Foo) => {
  console.log(bar);
  return <Text>Hello World</Text>;
}

const TestPage = () => {
  const fooObject : Foo = { bar: 'something' };
  // 展开传递所有属性，或直接传bar={fooObject.bar}
  return <Child {...fooObject} />;
}

本质上，TypeScript对React组件的Props做严格结构校验，你标注的类型必须和实际传入的props结构完全一致，不能把数据类型直接当作Props类型使用。

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