为何泛型React组件Props需显式声明object类型才被TypeScript认可？

我正在实现一个可作为链接或按钮的React组件：当as属性值为button时，它作为按钮并接受所有按钮相关Props，反之则作为链接并接受对应Props。功能运行正常，但有一点完全无法理解：展开的Props（{...props}）只有在显式告知TypeScript其类型为object时才会被接受，这是为什么？

可正常运行的代码 #

import { ComponentProps } from "react";
import styled from "styled-components";

type TextComponentType = "link" | "button";

type TextComponentProps<T extends TextComponentType> = {
  as: T;
} & ComponentProps<T extends "link" ? "a" : "button">;

export const TextComponent = <T extends TextComponentType>(
  props: TextComponentProps<T>
) => {
  return <StyledButton {...(props as object)}>HEhe</StyledButton>;
};

const StyledButton = styled.button`
  color: red;
`;

无法运行的代码（报错） #

import { ComponentProps } from "react";
import styled from "styled-components";

type TextComponentType = "link" | "button";

type TextComponentProps<T extends TextComponentType> = {
  as: T;
} & ComponentProps<T extends "link" ? "a" : "button">;

export const TextComponent = <T extends TextComponentType>(
  props: TextComponentProps<T>
) => {
  return <StyledButton {...props}>HEhe</StyledButton>;
};

const StyledButton = styled.button`
  color: red;
`;

原因解析 #

核心问题出在泛型条件类型的延迟解析和styled-components的类型约束上：

• 你的TextComponentProps<T>是通过条件类型动态生成的——当T是link时，它是a标签的Props加as；当T是button时，是button标签的Props加as。但在组件定义的位置，T是未具体化的泛型参数，TypeScript无法提前解析出这个交叉类型的具体结构，也就无法确认它是否完全符合StyledButton的Props要求。
• StyledButton作为基于button的styled组件，它的Props类型默认是button的Props，同时支持通过as属性切换为其他元素的Props，但TypeScript对这种动态切换的类型推断，无法和你定义的未具体化泛型Props直接兼容。
• 当你把props断言为object时，相当于跳过了TypeScript对具体属性的类型检查，强制让它认为这是一个可以安全展开的普通对象，因此不会报错。

更优雅的解决方法 #

不需要用as object断言，拆分as属性和剩余Props，让TypeScript能正确识别类型：

import { ComponentProps } from "react";
import styled from "styled-components";

type TextComponentType = "link" | "button";

// 先排除原生的as属性，避免重复定义
type TextComponentProps<T extends TextComponentType> = Omit<
  ComponentProps<T extends "link" ? "a" : "button">, 
  "as"
> & {
  as: T;
};

export const TextComponent = <T extends TextComponentType>(
  props: TextComponentProps<T>
) => {
  const { as, ...restProps } = props;
  // 显式传递as属性，剩余Props自动匹配对应元素的类型
  return <StyledButton as={as} {...restProps}>HEhe</StyledButton>;
};

const StyledButton = styled.button`
  color: red;
`;

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