TypeScript泛型在复杂大类型下出现TS2339属性访问异常问题

我在开发React组件时遇到了一个TypeScript异常：

• 自定义泛型类型WithComponentOverride用于扩展组件Props并指定ElementType，在小型自定义MyComponentProps上使用完全正常
• 但将其应用于@tanstack/react-router的TanstackLinkProps（一个复杂的大型类型）时，访问props.component会触发TS2339错误，提示该属性不存在
• 奇怪的是，类型定义里明确包含{ component: T; }字段，而且直接通过typeof props['component']访问类型时完全正常

疑问：这是不是TypeScript的bug？

关键代码示例 #

// 自定义泛型类型定义
type WithComponentOverride<Props extends {}, T extends React.ElementType> = Props & {
  component?: T;
};

// 小型自定义Props使用示例（正常工作）
type MyComponentProps = {
  text: string;
};
const MyComponent = <T extends React.ElementType = 'div'>(
  props: WithComponentOverride<MyComponentProps, T>
) => {
  const Component = props.component || 'div';
  return <Component>{props.text}</Component>;
};

// 应用于TanstackLinkProps时出现问题
import { TanstackLinkProps } from '@tanstack/react-router';
const CustomLink = <T extends React.ElementType = 'a'>(
  props: WithComponentOverride<TanstackLinkProps, T>
) => {
  const Component = props.component || 'a'; // 这里触发TS2339：属性'component'不存在于类型...
  return <Component {...props} />;
};

问题分析 #

这大概率不是TypeScript的bug，而是复杂类型组合下的类型推导边界问题。TanstackLinkProps本身可能包含联合类型、条件类型或者交叉类型的复杂分支，当与WithComponentOverride的交叉类型结合时，TypeScript的类型检查器无法在直接属性访问时正确解析出component字段的存在——但通过索引访问props['component']时，类型检查器会跳过部分分支的细化，所以能正常识别。

常见触发场景：

• 原Props类型包含never分支的条件类型
• 联合类型中部分分支存在隐藏的类型冲突，导致交叉类型的属性合并未被正确识别
• TypeScript对大型复杂交叉类型的属性解析存在局限性

解决方案 #

1. 类型断言：直接告知TypeScript属性存在，适合快速解决问题：

const Component = (props as WithComponentOverride<TanstackLinkProps, T>).component || 'a';

2. 调整泛型定义：改用Omit+Pick的方式明确合并类型，避免交叉类型的潜在冲突：

type WithComponentOverride<Props extends {}, T extends React.ElementType> = Omit<Props, 'component'> & {
  component?: T;
};

先移除原Props中可能存在的component字段（如果有的话），再重新添加，避免类型冲突。

3. 使用索引访问替代直接属性访问：既然props['component']能正常识别，直接用这种方式访问：

const Component = props['component'] || 'a';

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