Angular用Chart.js展示Firestore日期报错：无法读取null的toDate属性

错误原因 #

你遇到的ERROR TypeError: Cannot read properties of null (reading 'toDate')，是因为dateLabels数组里存在null值。当调用a.toDate()时，a为null，自然无法读取toDate方法。这通常是因为部分this.data中的weightDate字段未被正确赋值（比如用户未通过mat datepicker选择日期就提交了数据，导致Firestore存储了null）。

修复方案 #

方案1：过滤数组中的null值 #

在生成日期标签数组时，先过滤掉null项，避免后续调用toDate()出错：

// 先过滤null再排序
const dateLabels = this.data
  .map(item => item.weightDate)
  .filter(date => date !== null)
  .sort();

// 转换日期格式
const monthLabels = dateLabels.map(a => 
  this.datePipe.transform(a.toDate(), 'dd/MM/YYYY')
);

方案2：转换时判断null值 #

如果需要保留空标签（比如对应无日期的数据），可以在转换时做null判断，设置自定义默认显示文本：

const dateLabels = this.data.map(item => item.weightDate).sort();       
const monthLabels = dateLabels.map(a => 
  a ? this.datePipe.transform(a.toDate(), 'dd/MM/YYYY') : '无日期'
);

方案3：从源头避免null值 #

在用户提交数据前，校验mat datepicker的输入，强制用户必须选择日期才能提交，确保Firestore中weightDate字段不会存储null：

// 示例：表单提交时的校验逻辑
onSubmit() {
  if (!this.form.value.weightDate) {
    alert('请选择日期');
    return;
  }
  // 提交数据到Firestore的逻辑
}

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