传递组件及其Props时遭遇TypeScript错误的技术问询

问题分析 #

当前代码报错的核心原因是泛型T没有范围约束，TypeScript无法保证它与AnchorHTMLAttributes/ButtonHTMLAttributes存在交集；同时restTriggerProps错误地将三个类型强制交叉，导致类型冲突，无法实现"传入对应组件仅允许专属Props"的需求。

解决方案 #

1. 限定泛型范围 #

给泛型T添加约束，限定它只能是AnchorHTMLAttributes<HTMLAnchorElement>或ButtonHTMLAttributes<HTMLButtonElement>的子类型，让TypeScript明确T的合法范围。

2. 调整Props结构 #

让restTriggerProps直接对应T类型，同时排除onClick属性（我们需要合并弹窗切换逻辑与用户自定义的点击逻辑，避免属性覆盖）。

完整代码实现 #

import { ReactNode, FC, useState, AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEventHandler } from 'react';

// 定义Trigger允许的Props类型集合
type TriggerProps = AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>;

interface Props<T extends TriggerProps> {
  children?: ReactNode;
  triggerLabel: string;
  TriggerComponent: FC<T>;
  restTriggerProps?: Omit<T, 'onClick'>; // 排除onClick，统一处理点击逻辑
}

export const Popover = <T extends TriggerProps>({
  TriggerComponent,
  triggerLabel,
  restTriggerProps,
  children,
}: Props<T>) => {
  const [showPopover, setShowPopover] = useState(false);

  const handleToggle: MouseEventHandler = (e) => {
    // 优先执行用户传入的点击逻辑（如果存在）
    restTriggerProps?.onClick?.(e);
    // 执行弹窗切换逻辑
    setShowPopover((prev) => !prev);
  };

  return (
    <div>
      <TriggerComponent
        onClick={handleToggle}
        {...restTriggerProps}
      >
        {triggerLabel}
      </TriggerComponent>
      {showPopover && (
        <div className="popover-content">
          {children}
        </div>
      )}
    </div>
  );
};

代码说明 #

• 泛型约束：T extends TriggerProps确保T只能是Link或Button的Props类型，彻底解决"任意类型实例化"的报错。
• Omit<T, 'onClick'>：排除onClick属性是为了避免用户传入的点击逻辑覆盖弹窗切换逻辑，同时在handleToggle中实现逻辑合并。
• 事件合并：先执行用户自定义的点击逻辑，再切换弹窗状态，保证业务逻辑不冲突。

使用示例 #

// 使用原生a标签作为Trigger
<Popover 
  TriggerComponent="a" 
  triggerLabel="链接触发" 
  restTriggerProps={{ href: '/demo', target: '_blank' }}
>
  弹窗内容
</Popover>

// 使用原生button标签作为Trigger
<Popover 
  TriggerComponent="button" 
  triggerLabel="按钮触发" 
  restTriggerProps={{ type: 'button', disabled: false }}
>
  弹窗内容
</Popover>

// 使用自定义Link组件
const CustomLink: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ children, ...props }) => (
  <a {...props} className="custom-link">{children}</a>
);

<Popover 
  TriggerComponent={CustomLink} 
  triggerLabel="自定义链接" 
  restTriggerProps={{ href: '/custom' }}
>
  弹窗内容
</Popover>

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