React+TypeScript中正确设置LinkButton组件link属性类型的问题

你的问题核心在于link属性的联合类型无法同时满足react-router的Link组件和原生<a>标签的类型要求：Link的to属性支持字符串或路由对象，但原生<a>的href只接受字符串，导致TypeScript类型校验报错。

下面提供三种可行的解决方案：

方案1：使用类型守卫做分支处理 #

在渲染<a>标签前，通过类型判断确保link是字符串类型，同时处理对象类型的边界情况：

if (!useAnchorTag) {
  return <Link to={link}>{text}</Link>;
}

// 仅当link为字符串时渲染a标签
if (typeof link === 'string') {
  return <a href={link} target={target}>{text}</a>;
}

// 可选：处理link为对象但useAnchorTag为true的情况，比如抛出错误或返回默认内容
throw new Error('启用useAnchorTag时，link必须传入字符串类型');

方案2：用联合Props做类型约束 #

通过拆分Props的联合类型，强制useAnchorTag为true时link只能是字符串，从根源避免类型冲突：

import type { ButtonType } from '你的类型文件';

type LinkButtonProps = 
  // 启用原生a标签时，link必须为字符串
  | {
      text?: string;
      onClick?: (e: React.SyntheticEvent<HTMLAnchorElement>) => void;
      type?: ButtonType;
      link: string;
      target?: React.HTMLAttributeAnchorTarget;
      useAnchorTag: true;
    }
  // 使用react-router Link时，link支持字符串或路由对象
  | {
      text?: string;
      onClick?: (e: React.SyntheticEvent<HTMLAnchorElement>) => void;
      type?: ButtonType;
      link: string | {
        pathname: string;
        state: { from: string};
        hash: string;
      };
      target?: React.HTMLAttributeAnchorTarget;
      useAnchorTag?: false;
    };

// 组件定义
const LinkButton = (props: LinkButtonProps) => {
  const { text, link, useAnchorTag = false, target } = props;
  if (!useAnchorTag) {
    return <Link to={link}>{text}</Link>;
  }
  // 这里TypeScript会自动推断link是字符串，无需额外判断
  return <a href={link} target={target}>{text}</a>;
};

方案3：将路由对象转换为字符串href #

如果需要在启用useAnchorTag时也支持路由对象，可以手动将对象转换为原生<a>能识别的URL字符串（注意：原生a标签不支持react-router的state属性，会丢失该信息）：

function convertToHref(link: string | { pathname: string; state: { from: string}; hash: string }): string {
  if (typeof link === 'string') return link;
  // 拼接pathname和hash，忽略state（原生不支持）
  return `${link.pathname}${link.hash}`;
}

// 组件内渲染
if (!useAnchorTag) {
  return <Link to={link}>{text}</Link>;
}
return <a href={convertToHref(link)} target={target}>{text}</a>;

方案选择建议 #

• 若希望严格约束参数关系，优先选方案2，类型校验更严谨；
• 若需要兼容路由对象转原生href的场景，选方案3（需接受state丢失的限制）；
• 若只是临时修复类型报错，方案1最直接。

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