TypeScript开发MUI切换组件时，传入联合类型mode参数报错

问题场景 #

用TypeScript和Material UI开发了一个React组件，通过mode属性切换渲染逻辑：mode="view"时渲染Typography文本，mode="edit"时渲染TextField输入框。组件内部无TS报错，但父组件中传入类型为'edit' | 'view'的变量mode时触发编译错误；直接传入字面量mode="edit"/mode="view"则正常。

组件代码：

import { Typography, TextField } from '@mui/material'
import type { TypographyProps, TextFieldProps } from '@mui/material'

interface InputComponentProps {
  mode: 'edit' | 'view'
  content?: string
}

type EditModeProps = TextFieldProps & {
  mode: 'edit'
} & InputComponentProps

interface ViewModeProps extends TypographyProps, InputComponentProps {
  mode: 'view'
}

export default function InputComponent(props: EditModeProps | ViewModeProps) {
  const { mode, content, ...compProps } = props
  if (mode === 'edit') return <TextField value={content} {...(compProps as EditModeProps)} />
  if (mode === 'view') return <Typography children={content} {...(compProps as ViewModeProps)} />
}

父组件报错代码：

import InputComponent from './InputComponent'

interface UserProfilePageProps {
  mode: 'edit' | 'view'
}

export default function UserProfilePage(props: UserProfilePageProps) {
  const { mode } = props
  // 编译报错：Type '{ mode: "edit" | "view"; }' is not assignable to type '...'
  return <InputComponent mode={mode} content="hello world" />
}

原因分析 #

TypeScript无法自动将mode: 'edit' | 'view'的变量窄化为EditModeProps或ViewModeProps中的某一个分支。当传入联合类型变量时，TS会尝试匹配联合类型的所有分支，发现变量类型不匹配单一分支的mode类型（比如ViewModeProps要求mode必须是"view"，但变量可能是"edit"），因此抛出类型不兼容错误。

解决方案 #

方案1：重构组件props为泛型条件类型 #

通过泛型结合条件类型，让TypeScript根据mode的具体值自动推断对应的props类型，从根源上解决类型匹配问题：

import { Typography, TextField } from '@mui/material'
import type { TypographyProps, TextFieldProps } from '@mui/material'

// 用泛型条件类型定义props：根据mode决定附加的props类型
type InputComponentProps<TMode extends 'edit' | 'view'> = {
  mode: TMode
  content?: string
} & (TMode extends 'edit' ? TextFieldProps : TypographyProps)

// 定义泛型组件
export default function InputComponent<TMode extends 'edit' | 'view'>(
  props: InputComponentProps<TMode>
) {
  const { mode, content, ...compProps } = props
  if (mode === 'edit') {
    return <TextField value={content} {...compProps as TextFieldProps} />
  }
  return <Typography children={content} {...compProps as TypographyProps} />
}

方案2：父组件中使用类型守卫窄化类型 #

在父组件中通过if/else判断mode的具体值，手动窄化类型，让TS能匹配到对应的组件props分支：

import InputComponent from './InputComponent'

interface UserProfilePageProps {
  mode: 'edit' | 'view'
}

export default function UserProfilePage(props: UserProfilePageProps) {
  const { mode } = props
  if (mode === 'edit') {
    return <InputComponent mode="edit" content="hello world" />
  } else {
    return <InputComponent mode="view" content="hello world" />
  }
}

方案3：类型断言（临时解决） #

如果不想修改组件或父组件的结构，可以在父组件中对传入的props做类型断言，强制TS认可类型兼容性：

import InputComponent from './InputComponent'

interface UserProfilePageProps {
  mode: 'edit' | 'view'
}

export default function UserProfilePage(props: UserProfilePageProps) {
  const { mode } = props
  return <InputComponent 
    {...({ mode, content: "hello world" } as typeof InputComponent extends React.ComponentType<infer P> ? P : never)} 
  />
}

注意：类型断言会跳过TS的类型检查，仅建议作为临时解决方案，优先考虑方案1或方案2。

内容的提问来源于stack exchange，提问作者Islam Y-