TS2322错误：boolean类型无法赋值指定类型，Checkbox取值问题排查

问题概述 #

运行项目构建时触发TS2322错误：

Type 'boolean' is not assignable to type 'string | number | readonly string[] | undefined'

错误根源不在Zod校验Schema，而在React Checkbox组件的属性绑定和值更新逻辑上。

错误原因 #

React的<input type="checkbox">组件存在两处类型不兼容：

1. value属性仅接受string | number | readonly string[] | undefined类型，但代码中绑定了boolean类型的formData.combo
2. onChange事件中使用ev.target.value（字符串类型）去更新boolean类型的combo字段，导致类型冲突

修复方案 #

1. 移除Checkbox的value属性，改用checked属性绑定boolean状态
2. onChange事件中通过ev.target.checked获取boolean值来更新formData

修改后的代码片段 #

src/routes/dashboard/registrar.tsx（Checkbox部分） #

<div className="form-control">
  <label htmlFor="combo" className="label">
    Combo
  </label>
  <input
    id="combo"
    name="combo"
    type="checkbox"
    // 移除value属性，改用checked绑定boolean状态
    checked={formData.combo}
    onChange={(ev) =>
      // 用ev.target.checked获取boolean值更新formData
      setFormData({ ...formData, combo: ev.target.checked })
    }
    className="checkbox"
  />
</div>

额外说明 #

你的Zod校验Schema是正确的：combo: z.boolean()与FormData中的combo: boolean类型完全匹配，无需修改validationSchema.ts和validationRules.ts中的代码。

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