React组件as属性类型定义：额外Props报错且无代码提示

你写的MenuItem组件通过as属性支持自定义渲染组件，默认用react-router-dom的Link，但传入目标组件的专属Props（比如Link的to）时会触发类型错误，而且VS Code没法自动提示这些Props。核心原因是当前的类型定义没有把as指定的组件和额外Props做关联，下面是具体的修复方案：

步骤1：用泛型重构Props类型 #

通过泛型让组件Props和as指定的组件类型绑定，自动提取目标组件的合法Props：

import type { ElementType, ReactNode } from 'react';
import type { ClassValue } from 'clsx';
import { Link } from 'react-router-dom';
import clsx from 'clsx';

// 泛型Props，C代表as指定的组件类型，默认值为Link
type MenuItemProps<C extends ElementType = typeof Link> = {
  as?: C;
  className?: ClassValue;
  icon?: ReactNode;
  title?: ReactNode;
} & Omit<React.ComponentProps<C>, 'className'>;

步骤2：实现泛型组件 #

调整组件的实现，让它支持泛型，并处理默认组件的类型断言：

const MenuItem = <C extends ElementType = typeof Link>({
  as: Component = Link as C,
  className,
  icon,
  title,
  ...props
}: MenuItemProps<C>) => {
  return (
    <Component
      {...props}
      className={clsx(
        className,
        "rounded-lg w-full group p-2 flex gap-2 items-center hover:bg-[#fafafa] dark:hover:bg-neutral-800"
      )}
    >
      {icon && <span>{icon}</span>}
      {title && <span>{title}</span>}
    </Component>
  );
};

修复效果验证 #

现在使用组件时，TypeScript会自动识别as对应的Props：

• 使用默认Link组件，支持to属性无报错：

  <MenuItem to="/dashboard" title="仪表盘" icon={<svg>...</svg>} />
  

• 指定as="div"，支持div的onClick等Props：

  <MenuItem as="div" onClick={() => alert('点击菜单')} title="测试项" />
  

• 传入自定义组件，自动提示组件专属Props：

  const CustomBtn = ({ btnText, onClick }: { btnText: string; onClick: () => void }) => (
    <button onClick={onClick}>{btnText}</button>
  );
  <MenuItem as={CustomBtn} btnText="自定义按钮" onClick={() => {}} />
  

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