Material UI Date Picker存Firebase时间戳时如何允许空值

报错来自三个逻辑漏洞：

• 日期选择器清空时返回的newValue为null，原有逻辑没有做空值判断，直接对null调用format()方法生成无效日期值
• 存储到Firebase时没有对空日期做分支处理，直接对无效值调用toISOString()，触发Invalid time value报错
• 原有代码将格式化后的字符串直接作为value传给日期组件，不符合组件要求的Date | null类型约定，导致空状态识别异常

1. 调整状态定义 #

日期状态的空值统一使用null，不要用空字符串，初始值设为null：

// 替换原来的空字符串初始值
const [datefrom, setDateFrom] = useState(null);
const [dateto, setDateTo] = useState(null);

2. 修改选择器onChange逻辑 #

增加空值判断，value属性直接绑定Date对象，不要存格式化后的字符串：

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <MobileDatePicker
    label={"Date From"}
    inputFormat="dd/MM/yyyy"
    closeOnSelect={true}
    value={datefrom}
    minDate={new Date()}
    views={['day']}
    onChange={(newValue) => {
      // 处理清空场景
      if (!newValue) {
        setDateFrom(null);
        return;
      }
      // 组件value直接存合法Date对象
      setDateFrom(newValue);
      if (!dateto) {
        setDateTo(newValue);
      }
    }}
    renderInput={(params) => <TextField variant="outlined" {...params} fullWidth />}
  />
</LocalizationProvider>

3. 调整Firebase存储逻辑 #

存储前做空值判断，只有合法日期值才转时间戳，空值直接存null即可：

const submitData = async () => {
  const payload = {
    // 其他业务字段
    datefrom: datefrom ? datefrom.getTime() : null, // getTime()返回毫秒级时间戳，需要ISO格式就换toISOString()
    dateto: dateto ? dateto.getTime() : null
  }
  // 执行Firebase写入操作
  // await addDoc(...)
}

注意：日期格式化逻辑format()只在需要特定格式字符串展示、导出的场景使用，不要把格式化结果作为组件value回传，否则会导致组件内部日期解析错误。

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