React组件中如何为传入的footerComponent添加类型化props参数？

要正确为footerComponentProps标注类型，核心是把泛型约束调整为组件类型而非已创建的React元素，具体修正如下：

修正后的类型与组件实现 #

import React, { PropsWithChildren, ComponentProps, JSXElementConstructor } from 'react';

// 定义泛型Props，约束T为组件类型（自定义组件/原生HTML标签）
interface SidebarWithFooterProps<T extends JSXElementConstructor<any> | keyof React.IntrinsicElements> extends SidebarProps {
  footerComponent: T;
  footerComponentProps?: ComponentProps<T>;
}

// 泛型组件实现，自动推断T的类型
export const SidebarWithFooter = <T extends JSXElementConstructor<any> | keyof React.IntrinsicElements>({
  footerComponent: FooterComponent, // 重命名为大写开头，符合组件命名规范
  footerComponentProps = {},
  className,
  mobile,
  ...props
}: PropsWithChildren<SidebarWithFooterProps<T>>) => (
  <div className={classes.root}>
    <Sidebar className={clsx(classes.content, className)} mobile={mobile} {...props} />
    <div className={classes.footer}>
      {/* 将footerComponent作为组件调用，传入对应的props */}
      <FooterComponent {...footerComponentProps} />
    </div>
  </div>
);

关键说明 #

1. 泛型约束修正
   你之前错误地将泛型约束为React.ReactElement（已渲染的元素），但React.ComponentProps<T>要求T是组件构造函数（自定义函数/类组件）或原生HTML标签名（如'div'），所以约束需要改为JSXElementConstructor<any> | keyof React.IntrinsicElements，覆盖所有合法的组件类型。

2. 自动类型推断
   将组件定义为泛型函数（而非固定泛型参数的React.FC），这样使用时TypeScript会自动根据你传入的footerComponent推断出T的类型，进而自动校验footerComponentProps的结构是否匹配，无需手动指定泛型参数。

3. 组件渲染方式调整
   原代码直接渲染footerComponent（ReactNode），现在需要将其作为组件调用并传入footerComponentProps，这样才能传递props给目标组件。

使用示例 #

// 自定义Footer组件
const CustomFooter = ({ title, onClick }: { title: string; onClick: () => void }) => (
  <button onClick={onClick}>{title}</button>
);

// 使用自定义组件
<SidebarWithFooter
  footerComponent={CustomFooter}
  footerComponentProps={{ title: '返回顶部', onClick: () => window.scrollTo(0,0) }}
>
  侧边栏内容
</SidebarWithFooter>

// 使用原生HTML元素
<SidebarWithFooter
  footerComponent="div"
  footerComponentProps={{ className: 'text-gray-500', children: '版权所有 © 2024' }}
>
  侧边栏内容
</SidebarWithFooter>

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