如何修复TypeScript类型错误：'string | number'无法赋值给SetStateAction<string>

问题根源 #

你的EditableField组件定义中，setValue的参数类型是string | number，但你传给它的setName是useState<string>返回的状态更新函数，只能接受string类型的值，两者类型不兼容，因此触发了TypeScript报错。

解决方案 #

方案1：给组件添加泛型（推荐） #

让EditableField的value和setValue类型绑定，不同场景可以指定具体类型，既保证类型安全又保留组件复用性：

修改组件类型定义：

type EditableFieldProps<T extends string | number> = {
  editing: boolean
  setEditing: (editing: boolean) => void
  label: string
  type: T extends number ? "number" : "text" // 可选：让type与值类型强关联
  value: T
  setValue: (value: T) => void
  displayValue: string
  onBlur: () => void
  ariaLabel: string
}

const EditableField = <T extends string | number>({ 
  editing, setEditing, label, type, value, setValue, displayValue, onBlur, ariaLabel 
}: EditableFieldProps<T>) => {
  const inputRef = useRef<HTMLInputElement | null>(null)

  useEffect(() => {
    if (editing) {
      setTimeout(() => {
        inputRef.current?.focus()
      }, 0)
    }
  }, [editing, inputRef])

  return (
    <>
      <Grid item xs={6}>
        <Typography variant="subtitle2" fontWeight="bold">{label}:</Typography>
      </Grid>
      <Grid item xs={6}>
        <Grid container alignItems="center">
          <Grid item flexGrow="1">
            {editing ? (
              <TextField
                label={label}
                type={type}
                {...(type === 'number' ? { inputProps: { step: '0.01' } } : {})}
                fullWidth
                value={value}
                onChange={e => setValue(e.target.value as T)}
                onBlur={onBlur}
                size="small"
                inputRef={inputRef}
                sx={{ marginTop: 1 }} />
            ) : (
              <Typography variant="subtitle2">{displayValue}</Typography>
            )}
          </Grid>
          <Grid item>
            {!editing && (
              <IconButton aria-label={ariaLabel} size="small" onClick={() => setEditing(true)}>
                <EditIcon fontSize="inherit" />
              </IconButton>
            )}
          </Grid>
        </Grid>
      </Grid>
    </>
  )
}

使用组件时指定类型：

const [name, setName] = useState<string>('')

// ...

<EditableField<string>
  editing={editingName}
  setEditing={setEditingName}
  label="Name"
  type="text"
  value={name}
  setValue={(newValue) => setName(newValue)}
  displayValue={name}
  onBlur={onNameChange}
  ariaLabel="Edit Name"
/>

方案2：类型守卫/断言（快速临时解决） #

如果不想修改组件结构，可以在传递setValue时做类型检查，确保只传入string类型：

<EditableField
  editing={editingName}
  setEditing={setEditingName}
  label="Name"
  type="text"
  value={name}
  setValue={(value) => {
    // 类型守卫：确保是string才更新状态
    if (typeof value === 'string') {
      setName(value)
    }
    // 或确定场景不会出现number时，用断言
    // setName(value as string)
  }}
  displayValue={name}
  onBlur={onNameChange}
  ariaLabel="Edit Name"
/>

方案3：拆分组件类型为联合类型 #

把EditableFieldProps拆分为文本和数字两种场景的联合类型，让type与参数类型强绑定：

type EditableTextProps = {
  editing: boolean
  setEditing: (editing: boolean) => void
  label: string
  type: "text"
  value: string
  setValue: (value: string) => void
  displayValue: string
  onBlur: () => void
  ariaLabel: string
}

type EditableNumberProps = {
  editing: boolean
  setEditing: (editing: boolean) => void
  label: string
  type: "number"
  value: number
  setValue: (value: number) => void
  displayValue: string
  onBlur: () => void
  ariaLabel: string
}

type EditableFieldProps = EditableTextProps | EditableNumberProps

// 组件逻辑不变，TypeScript会自动根据type推断参数类型
const EditableField = ({ 
  editing, setEditing, label, type, value, setValue, displayValue, onBlur, ariaLabel 
}: EditableFieldProps) => {
  // ... 原有逻辑
}

为什么之前的修改无效 #

你之前尝试把setValue改成SetStateAction<string | number>，但setName是SetStateAction<string>，两者依然不兼容——因为SetStateAction<string | number>允许传入number，而setName无法接受该类型。核心问题是组件的类型设计没有和具体的状态类型绑定，导致类型范围不匹配。

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