如何解决TypeScript与Mantine的DateValue类型不兼容错误？

问题原因 #

代码里的DateTimePicker开启了clearable属性，这会让它的onChange回调返回的val类型变为Date | null（即Mantine定义的DateValue），但表单中visitDateTime字段的类型被TypeScript推断为Date（因为初始值是new Date()），类型不兼容导致了报错。

解决方案 #

方案1：允许表单字段为null（推荐）

直接调整表单字段的类型，允许visitDateTime为Date | null，和DateTimePicker的返回值类型匹配：

// 先定义表单值的类型（更规范）
type FormValues = {
  visitorName: string;
  firmName: string;
  purposeOfVisit: string;
  vehicleLicense: string;
  email: string;
  phone: number;
  visitDateTime: Date | null;
  isSafetyInstructionsGiven: boolean;
  isGeneralVisitGuideGiven: boolean;
  isTaskingDocumentReceived: boolean;
};

export default function MantineForm() {
  const form = useForm<FormValues>({
    initialValues: {
      visitorName: "",
      firmName: "",
      purposeOfVisit: `${PurposeOfVisit.Subcontractor}`,
      vehicleLicense: "",
      email: "",
      phone: 0,
      visitDateTime: new Date(),
      isSafetyInstructionsGiven: false,
      isGeneralVisitGuideGiven: false,
      isTaskingDocumentReceived: false,
    },
  });
}

之后onChange代码无需修改即可正常使用：

<DateTimePicker
  value={form.values.visitDateTime}
  onChange={(val) => form.setFieldValue("visitDateTime", val)}
  label="Ziyaret Tarih ve Saati"
  clearable
  valueFormat="DD.MM.YYYY - HH:mm"
  locale="tr"
/>

方案2：处理null值，替换为默认日期

如果不想修改字段类型，可以在onChange时把null替换成默认日期（比如当前时间），但点击清空按钮不会真正清空，而是回到默认值：

<DateTimePicker
  value={form.values.visitDateTime}
  onChange={(val) => form.setFieldValue("visitDateTime", val ?? new Date())}
  label="Ziyaret Tarih ve Saati"
  clearable
  valueFormat="DD.MM.YYYY - HH:mm"
  locale="tr"
/>

方案3：移除清空功能

如果不需要用户清空日期，直接去掉clearable属性，DateTimePicker的onChange只会返回Date类型，和表单字段类型完全匹配：

<DateTimePicker
  value={form.values.visitDateTime}
  onChange={(val) => form.setFieldValue("visitDateTime", val)}
  label="Ziyaret Tarih ve Saati"
  valueFormat="DD.MM.YYYY - HH:mm"
  locale="tr"
/>

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