React Typescript中传递带props的组件作为prop出现类型错误如何解决？

错误根因 #

你在CardProps中将skillsComponent的类型声明为FC<SkillsProps>（React函数组件类型），但你在About组件中传递的是已经完成Props注入、渲染完成的JSX.Element实例，二者类型不匹配因此触发TS类型报错。

最优解决方案（适配你当前代码逻辑） #

你当前的需求是将已经配置好skills、columns参数的Skills组件直接传入Card中渲染，仅需要修改CardProps中skillsComponent的类型定义即可：

interface CardProps {
  title: string;
  text: string;
  // 替换原有FC<SkillsProps>类型为React.ReactNode
  skillsComponent?: React.ReactNode;
}

React.ReactNode是React官方定义的所有可直接渲染内容的联合类型，覆盖了JSX元素、字符串、数字、null、undefined、数组等所有合法渲染值，兼容性最强，不需要修改其他业务逻辑即可解决报错。

可选扩展方案（适用于需要在Card内给Skills传额外参数的场景） #

如果你后续需要在Card组件内部给Skills组件传递额外的Props，也可以选择传递组件本身而非预渲染的元素：

1. 修改About组件传参逻辑，传递组件函数而非渲染结果：

const About = () => {
  const skills: string[] = ['a', 'b', 'c', 'd', 'e', 'f']
  const columns: number = 2
  const title: string = "ABOUT"
  const text: string = `Lorem Ipsum.`
  return (
    <Card
      text={text}
      title={title}
      skillsComponent={Skills}
      skills={skills}
      columns={columns}
    >
    </Card>
  );
};

2. 调整CardProps类型定义与渲染逻辑：

interface CardProps {
  title: string;
  text: string;
  skillsComponent: FC<SkillsProps>;
  skills: string[];
  columns: number;
}

const Card: FC<CardProps>  = ({ title, text, skillsComponent: SkillsComponent, skills, columns }): JSX.Element => {
  return (
    <div>
      <div className="container">
        <div className="title">{title}</div>
        <div className="underline"></div>
        <div className="card">
          <div className="text">
            {text}
          </div>
        </div>
      </div>
      {/* 内部渲染时再传入Props */}
      <SkillsComponent skills={skills} columns={columns} />
    </div>
  )
}

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