React TypeScript组件条件Props类型收窄构建报错求助

你的问题核心是TypeScript没有通过type判别式正确收窄data的类型，加上data为可选属性，导致构建时类型检查失败。以下是几种无需使用as断言的优雅解决方法：

方案一：优化类型定义，明确判别式关联 #

调整类型结构，将基础属性与各类型专属属性直接交叉，让TypeScript更清晰地识别type与data的关联关系：

interface TableRowProps {
  disabled?: boolean
}

type AnimalRowProps = TableRowProps & {
  type: 'animal'
  data: AnimalData // 若业务允许，建议设为必填；若需保留可选，见方案二
}

type PersonRowProps = TableRowProps & {
  type: 'person'
  data: PersonData
}

// 直接使用各类型的联合作为组件Props
type TableRowComponentProps = AnimalRowProps | PersonRowProps

const TableRow: FC<TableRowComponentProps> = ({ type, data, disabled }) => {
  if (type === 'animal') {
    return (
      <tr>
        <td>{data.animalProp}</td>
      </tr>
    )
  }
    
  if (type === 'person') {
    return (
      <tr>
        <td>{data.personProp}</td>
      </tr>
    )
  }
  
  // 必须添加默认返回，避免无返回值的类型错误
  return null
}

方案二：保留原有类型，添加data存在性判断 #

如果需要保留data的可选性，在访问属性前先判断data是否存在，TypeScript会自动收窄data的类型：

// 保留你原有的类型定义
interface TableRowProps {
  disabled?: boolean
}

type AnimalProps = {
  type: 'animal'
  data?: AnimalData
}

type PersonProps = {
  type: 'person'
  data?: PersonData
}

type ConditionalProps = AnimalProps | PersonProps

const TableRow: FC<TableRowProps & ConditionalProps> = ({ type, data, disabled }) => {
  // 同时判断type和data存在性
  if (type === 'animal' && data) {
    return (
      <tr>
        <td>{data.animalProp}</td>
      </tr>
    )
  }
    
  if (type === 'person' && data) {
    return (
      <tr>
        <td>{data.personProp}</td>
      </tr>
    )
  }
  
  return null
}

方案三：自定义类型守卫函数（复杂场景适用） #

如果业务逻辑更复杂，可通过自定义类型守卫明确告诉TypeScript当前的类型：

// 保留原有类型定义
interface TableRowProps {
  disabled?: boolean
}

type AnimalProps = {
  type: 'animal'
  data?: AnimalData
}

type PersonProps = {
  type: 'person'
  data?: PersonData
}

type ConditionalProps = AnimalProps | PersonProps

// 自定义类型守卫，判断是否为Animal类型
function isAnimalRow(props: TableRowProps & ConditionalProps): props is TableRowProps & AnimalProps {
  return props.type === 'animal' && !!props.data
}

// 自定义类型守卫，判断是否为Person类型
function isPersonRow(props: TableRowProps & ConditionalProps): props is TableRowProps & PersonProps {
  return props.type === 'person' && !!props.data
}

const TableRow: FC<TableRowProps & ConditionalProps> = (props) => {
  if (isAnimalRow(props)) {
    return (
      <tr>
        <td>{props.data.animalProp}</td>
      </tr>
    )
  }
    
  if (isPersonRow(props)) {
    return (
      <tr>
        <td>{props.data.personProp}</td>
      </tr>
    )
  }
  
  return null
}

补充说明 #

VS Code无报错但构建失败，大概率是编辑器的TypeScript检查配置（如strict模式）与构建脚本的配置不一致，导致编辑器未检测到类型问题，而构建时严格检查触发报错。

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