React+TypeScript文件上传组件reader.result可能为null错误修复

针对你遇到的'reader.result' is possibly 'null'错误，以下是几种无需关闭TypeScript空检查的修复方案：

方案1：非空断言（快速简洁） #

在reader.result后添加!断言其不为null——因为onload回调触发时，readAsDataURL已经执行完成，result必然是有效的Data URL字符串：

const base64String = reader.result!
    .replace("data:", "")
    .replace(/^.+,/, "");

方案2：类型守卫（更严谨） #

通过条件判断先确认reader.result存在，再进行后续操作，完全符合TypeScript严格空检查的要求：

reader.onload = () => {
    console.log("file_upload");
    if (reader.result) {
        const base64String = reader.result
            .replace("data:", "")
            .replace(/^.+,/, "");
        form.setValue("fileone", base64String);
    } else {
        // 可选：处理极端情况下的读取失败
        form.setError("fileone", {
            message: "文件读取失败，请重试"
        });
    }
};

额外优化提示 #

你代码中重复调用了useForm，会导致表单状态不一致，建议合并为一次调用：

const {
    formState: { errors, isSubmitting },
    setValue,
    clearErrors,
    setError
} = useForm<TsformSchema>({ resolver: zodResolver(formSchema) });

之后直接使用setValue、clearErrors等方法即可，无需单独声明form变量。

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