Shadcn Checkbox与react-hook-form类型不兼容问题求助

错误原因 #

shadcn的Checkbox组件onCheckedChange事件的参数类型是CheckedState，包含boolean | "indeterminate"两种有效取值；而react-hook-form提供的field.onChange仅接受boolean | ChangeEvent<Element>类型，不兼容"indeterminate"字符串类型，导致TypeScript类型校验失败。

解决方案 #

你的remember字段是布尔类型的登录记忆开关，无需处理半选（indeterminate）状态，推荐以下两种解决方法：

方法一：包装回调，过滤非布尔值 #

在onCheckedChange的回调中判断参数类型，仅将布尔值传递给react-hook-form：

<FormField
    control={form.control}
    name="remember"
    render={({field}) => (
        <FormItem className="flex flex-row items-start space-x-3 space-y-0.5">
            <FormControl>
                <Checkbox 
                    checked={field.value} 
                    onCheckedChange={(checked) => {
                        if (typeof checked === 'boolean') {
                            field.onChange(checked);
                        }
                    }} 
                />
            </FormControl>
            <div className="space-y-1 leading-none">
                <FormLabel className="text-md cursor-pointer select-none">Angemeldet bleiben</FormLabel>
            </div>
        </FormItem>
    )}
/>

方法二：类型强制转换（确定无需半选时使用） #

直接将field.onChange的类型强制转换为Checkbox所需的回调类型：

<FormField
    control={form.control}
    name="remember"
    render={({field}) => (
        <FormItem className="flex flex-row items-start space-x-3 space-y-0.5">
            <FormControl>
                <Checkbox 
                    checked={field.value} 
                    onCheckedChange={field.onChange as (checked: CheckedState) => void} 
                />
            </FormControl>
            <div className="space-y-1 leading-none">
                <FormLabel className="text-md cursor-pointer select-none">Angemeldet bleiben</FormLabel>
            </div>
        </FormItem>
    )}
/>

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