TypeScript泛型React组件透传props给children渲染函数报错如何解决

报错原因 #

这个报错是 TypeScript 类型系统的正常提示：你定义的泛型 T 是 BonusCommon 的任意子类型，TS 无法自动推导你解构后拼接的 { onClick, offerId, ...rest } 完全覆盖了 T 的所有属性，因此会抛出子类型不兼容的错误。

解决方案 #

方案1：类型断言（无侵入，适配现有调用逻辑） #

你的业务逻辑本身就是透传所有非 children 的入参，直接给传给 children 的参数加类型断言即可，不需要修改任何调用代码：

const Bonus = <T extends BonusCommon>({
  children,
  offerId,
  ...rest
}: BonusProps<T>) => {
  const onClick = () => {} // 你的业务逻辑实现

  return (
    <>
      {children({
        onClick,
        offerId,
        ...rest
      } as RenderProps<T>)}
    </>
  )
}

方案2：调整Props结构（更严谨，无类型断言） #

如果不想用类型断言，可以把自定义属性单独收拢到data字段，TS可以自动推导这种结构的类型：

// 类型定义调整
type BonusProps<T extends BonusCommon> = {
  data: T
  children: (renderProps: RenderProps<T>) => ReactNode
}

type RenderProps<T> = {
  onClick: () => void
} & T

// 组件实现
const Bonus = <T extends BonusCommon>({
  children,
  data
}: BonusProps<T>) => {
  const onClick = () => {}

  return (
    <>
      {children({
        onClick,
        ...data
      })}
    </>
  )
}

// 调用方式对应调整
const bonus1 = { offerId: 1, offerDate: 1911 }
<Bonus data={bonus1}>
{({ offerId, offerDate, onClick }) => {}}
</Bonus>

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