TypeScript组件声明不接受联合类型的问题排查

问题原因 #

你遇到的TS2339错误源于当前Props类型的构造逻辑：
你的Props类型为({ onClick: MouseEventHandler } | { to: string }) & 共享属性，由于&优先级高于|，实际等价于({ onClick: MouseEventHandler } & 共享属性) | ({ to: string } & 共享属性)。直接解构onClick和to时，TypeScript无法确定当前Props属于哪个分支，因此判定这两个属性可能不存在，触发错误。

解决方案 #

通过类型守卫缩小Props的类型范围，让TypeScript明确当前分支的属性存在性，同时调整Props类型定义，确保共享属性（如buttonComponent、BoxProps、children）被正确包含在每个联合分支中。

完整修正代码 #

import React, { MouseEventHandler, PropsWithChildren } from 'react';

// 假设以下依赖已定义
type StickyBoxProps = Record<string, unknown>;
const StickyBox = (props: StickyBoxProps) => <div {...props} />;
const Button = (props: { onClick?: MouseEventHandler }) => <button {...props} />;
const navigate = (path: string) => {};

// 重构Props类型，将共享属性并入每个联合分支
type StickyButtonProps = 
  PropsWithChildren<{
    onClick: MouseEventHandler;
    buttonComponent?: ({ onClick: MouseEventHandler }) => JSX.Element;
  } & StickyBoxProps>
  |
  PropsWithChildren<{
    to: string;
    buttonComponent?: ({ onClick: MouseEventHandler }) => JSX.Element;
  } & StickyBoxProps>;

const StickyButton = ({ 
  children, 
  buttonComponent: ButtonComponent = Button, 
  ...props 
}: StickyButtonProps) => {
  let handler: MouseEventHandler;
  
  // 类型守卫：明确当前Props分支的属性
  if ('to' in props) {
    handler = () => navigate(props.to);
  } else {
    handler = props.onClick;
  }

  return (
    <StickyBox {...props}>
      <ButtonComponent onClick={handler}>{children}</ButtonComponent>
    </StickyBox>
  );
};

关键要点 #

1. 类型守卫生效：通过'to' in props判断分支，TypeScript会自动缩小类型范围，确认props.to或props.onClick的存在性。
2. Props类型重构：用PropsWithChildren处理children属性，将共享属性直接放入每个联合分支，避免交叉类型带来的模糊性。
3. 避免提前解构：不要直接解构onClick和to，而是从props中访问，确保类型守卫能正确识别分支。

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