React TypeScript动态组件报错：类型与IntrinsicAttributes无共同属性

问题根源 #

你遇到的TS2559错误，核心原因有两个：

1. TypeScript无法推断动态变量Comp的具体组件类型，默认把它当成通用元素处理，但你传递了href/to这类不是所有元素都支持的属性，导致类型交集为空。
2. 你给所有组件都传递了href和to，但button不需要这两个属性，a标签不需要to，React Router的Link不需要href，这种冗余属性触发了类型检查报错。

修复方案 #

方案一：条件分支渲染（类型最安全，可读性高）

用联合类型明确每种按钮类型的专属props，通过分支渲染对应组件，避免传递无用属性：

import { Link } from 'react-router-dom';
import { ReactNode } from 'react';

// 用联合类型定义每种组件的专属props
type ButtonProps = 
  | { type: 'button'; children: ReactNode }
  | { type: 'anchor'; href: string; children: ReactNode }
  | { type: 'link'; to: string; children: ReactNode };

function Button(props: ButtonProps) {
  switch (props.type) {
    case 'button':
      return <button>{props.children}</button>;
    case 'anchor':
      return <a href={props.href}>{props.children}</a>;
    case 'link':
      return <Link to={props.to}>{props.children}</Link>;
    default:
      throw new Error('无效的按钮类型');
  }
}

使用示例：

<Button type="button">普通按钮</Button>
<Button type="anchor" href="/about">锚点链接</Button>
<Button type="link" to="/dashboard">路由跳转按钮</Button>

方案二：动态组件+精准传参（保留原动态写法）

如果想保留动态切换组件的逻辑，需要明确组件类型，并只传递对应组件需要的props：

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

type ButtonProps = {
  href?: string;
  to?: string;
  children: ReactNode;
};

function Button(props: ButtonProps) {
  const { href, to, children } = props;

  let Comp: ElementType;
  const compProps: Record<string, string> = {};

  // 根据条件确定组件和对应props
  if (to) {
    Comp = Link;
    compProps.to = to;
  } else if (href) {
    Comp = 'a';
    compProps.href = href;
  } else {
    Comp = 'button';
  }

  return <Comp {...compProps}>{children}</Comp>;
}

额外注意 #

• 确保已安装react-router-dom并正确导入Link组件，否则路由跳转功能会失效。
• 两种方案都避免了冗余属性传递，TypeScript能准确推断每个组件的props类型，彻底解决TS2559错误。

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