React自定义CustomForm组件类型报错：未传multipart属性不兼容

问题根源 #

你的类型定义里，联合类型的两个分支都要求multipart是必填属性——哪怕你把第二个分支的multipart值设为undefined | null，TypeScript仍然会认为这个属性必须存在，只是值可以是这些。这就是为什么不传multipart时会报错“属性缺失”。

解决方案 #

把JSON表单分支的multipart设为可选属性，这样TypeScript会允许该属性完全不出现，自动匹配JSON表单的类型逻辑：

import { ReactNode } from 'react';

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[];
    setMethods?: Function;
    className?: string;
} & ({
    multipart: true;
    onSubmit: (data: FormData) => void;
} | {
    // 将multipart设为可选，允许属性完全不传递
    multipart?: false | undefined | null;
    onSubmit: (data: T) => void;
});

验证场景 #

• 不传multipart：自动匹配第二个分支，onSubmit接收T类型参数，符合JSON表单预期
• 传multipart（或multipart={true}）：匹配第一个分支，onSubmit接收FormData类型参数，对应Multipart表单
• 传multipart={false}：依然匹配第二个分支，正常处理JSON表单

修改后即可按照你最初期望的写法使用组件，无需显式传递multipart={false}。

内容的提问来源于stack exchange，提问作者João Pedro