如何将Material UI DatePicker值以timestamp格式存储到Firestore?

你当前使用的Material UI DatePicker的format属性仅控制前端展示的日期格式，绑定的value本身就是原生Date对象，不需要修改DatePicker的现有配置，仅需要在提交数据到Firestore时将Date对象转为Firestore内置的Timestamp类型即可。

• 第一步：修正代码拼写错误
  你当前的状态定义存在变量名拼写问题，seconDate缺失字母d，会导致后续引用报错，修正后如下：

  const [secondDate, setSecondDate] = useState(new Date());
  

  原有DatePicker组件代码无需调整，format="MM/dd/yyyy"仅控制输入框内的展示格式，不会改变secondDate的Date类型。

• 第二步：导入Firestore Timestamp对象
  根据你使用的Firebase SDK版本选择对应导入方式：

  • 模块化Web SDK v9/v10版本：

  import { Timestamp } from "firebase/firestore";
  

  • 命名空间式旧版SDK：

  import firebase from "firebase/app";
  import "firebase/firestore";
  

• 第三步：提交数据时转换格式
  往Firestore写数据时，调用Timestamp.fromDate方法将日期对象转为Timestamp格式存储即可，示例代码：

  const submitToFirestore = async () => {
    // 模块化SDK写法
    await addDoc(collection(db, "你的集合名称"), {
      // 其他业务字段
      date: Timestamp.fromDate(secondDate)
    });
  
    // 旧版SDK写法替换为下面的字段即可
    // date: firebase.firestore.Timestamp.fromDate(secondDate)
  }
  

后续从Firestore读取该字段时，直接调用Timestamp实例的toDate()方法即可转回原生Date对象，可直接传给DatePicker做回显。

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