映射渲染React组件时传递多Props出现TS类型错误如何解决？

你遇到的TS报错本质是组件Props接口定义和实际传递的参数结构不匹配，具体问题出在两处：

1. 调用TeamsContainer时，你用{...tournament}把Tournament类型的所有字段展开成了根级props，同时额外传递了根级的leagueFilter属性；但你组件定义的Props接口中，根级属性是tournament: Tournament + leagueFilter: string，两种结构完全不对应。
2. 组件内的解构逻辑和Props定义不匹配：你定义的Props里tournament是单独的根级属性，但解构时用{ leagueFilter, ...tournament }会把除了leagueFilter之外的所有根级属性归集到tournament对象，和你定义的结构不符。

以下是两种可行解决方案：

方案1：调整传参结构，匹配现有Props定义 #

不需要改组件的Props接口，只需要修改调用组件时的传参逻辑，把tournament作为单独属性传递，不要展开：

{tournaments.map((tournament: Tournament, index: number) => (
  <TeamsContainer
    key={tournament.bout + tournament.league}
    tournament={tournament} // 直接传递tournament对象，不展开
    leagueFilter={leagueFilter}
  />
))}

同时调整组件内的解构写法：

const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, tournament }) => {
  // 直接使用tournament和leagueFilter即可
  return <></>
};

方案2：调整Props接口，匹配现有传参逻辑 #

如果你希望保持现在{...tournament}展开传递的写法，只需要修改Props接口让它继承Tournament的所有字段即可：

import { Tournament } from "../types";

// 接口继承Tournament，自带Tournament的所有属性，再加leagueFilter
interface Props extends Tournament {
  leagueFilter: string;
}

const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, ...tournament }) => {
  // 这里的tournament就是所有Tournament字段归集的对象，符合你的解构逻辑
  return <></>
};

这种方案下不需要修改调用组件的代码，直接就能正常运行。

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