React TypeScript条件组件Props配置问题求助

问题出在联合类型的定义上：原Props的两个分支都要求isMedia为必填字段（一个固定为false，一个固定为true），但你调用时未传入isMedia，虽然组件内部有默认值，但TypeScript的类型检查不允许这种情况。

只需修改Props类型，让TextCard对应的分支允许isMedia可选（即不传isMedia时自动匹配文本卡片的属性）：

import { ReactNode } from 'react';

export interface MediaCardProps {
  alt: string;
  src: string;
}

export const MediaCard = ({ alt, src }: MediaCardProps) => {
  // 组件实现
  return <div><img src={src} alt={alt} /></div>;
};

export interface TextCardProps {
  isLoaded: boolean;
  children: ReactNode;
}

export const TextCard = ({ children, isLoaded = false }: TextCardProps) => {
  // 组件实现
  return <div>{isLoaded ? children : 'Loading...'}</div>;
};

// 修改后的Props类型
type Props = 
  | ({ isMedia?: false } & TextCardProps) 
  | ({ isMedia: true } & MediaCardProps);

export const Card = ({ isMedia = false, ...args }: Props) => {
  if (isMedia) {
    return <MediaCard {...args as MediaCardProps} />;
  }
  return <TextCard {...args as TextCardProps} />;
};

现在调用<Card isLoaded={!!data.title}><h1 className='text-2xl font-bold'>{data.title}</h1></Card>时，TypeScript会自动匹配{ isMedia?: false } & TextCardProps分支，不会再报错。

如果想要更严谨的类型推断（避免类型断言），可以用类型守卫进一步优化：

function isMediaCardProps(props: Props): props is { isMedia: true } & MediaCardProps {
  return props.isMedia === true;
}

export const Card = (props: Props) => {
  const { isMedia = false, ...args } = props;
  if (isMediaCardProps(props)) {
    return <MediaCard {...args} />;
  }
  return <TextCard {...args} />;
};

这样TypeScript会在isMediaCardProps判断后自动缩小args的类型，无需手动断言。

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