Githubカレンダーを実装したいがCannot read property 'toDate' of nullが発生する

Question

実現したいこと

TypeError: Cannot read property 'toDate' of nullを解決したい。

前提

Githubの草カレンダーをポートフォリオに実装したいです。
筋トレSNSアプリを作っていまして、firestoreからユーザーの筋トレ記録（簡単に言うと「何をどれだけやったか」です）を取得して配列の形でstateに詰め、react-calenderというライブラリに渡すことで実現したいと考えてます。

発生している問題・エラーメッセージ

二枚目の写真の通り、データを取得して色塗りまではできたのですが、
データを登録するとき（二枚目の写真の左下の「Post」ボタンを押したとき）に一枚目のエラーが発生します。

エラー画面で更新すると、一枚目のように色塗りされていることが確認できます（エラー画面から正常な画面に移る）。
間違っているのがDateオブジェクトの扱い方なのか、useEffectの書き方なのか分からなくなってしまいました。

該当のソースコード

import React, { useState, useEffect } from 'react'
import { auth, db } from "../../firebase";
import { useSelector } from "react-redux";
import { selectUser } from "../../features/userSlice";
import { selectProfileUser } from "../../features/profileUserSlice";
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import {
  Avatar,
  createStyles,
  makeStyles,
  Theme,
} from "@material-ui/core";
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";
import ReactTooltip from "react-tooltip";
import "./User.tsx.scss";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    large: {
      width: theme.spacing(9),
      height: theme.spacing(9),
    },
  }),
);
interface Commit {
  date: string;
  count: number;
}
const User:React.FC = () => {
  const classes = useStyles();
  const user = useSelector(selectUser);
  const profileUser = useSelector(selectProfileUser);
  const [ commits, setCommits ] = useState<Commit[]>([]);
  const [ commitUser, setCommitUser ] = useState("");

  useEffect(() => {
    // if (profileUser) {
    //   setCommitUser(profileUser.name);
    // } else {
    //   setCommitUser(user.displayName)
    // }
    const fetchDate = async() => {
      try{
        await db.collection("training_posts")
        .where("username", "==", "たらお@redux難しい")
        .onSnapshot((querySnapshot) => setCommits(
          querySnapshot.docs.map((doc) => ({
            date: doc.data().timestamp.toDate(),
            count: doc.data().training_array.length,
          }))
        ));
      } catch(err) {
        console.error(err);
      }
    }
    fetchDate();
  }, [])
  return (
    <div className="flex flex-col">
      <div className="flex items-center">
        <Avatar
          data-testid="avatar"
          className={classes.large}
          src={profileUser.avatar
            ? profileUser.avatar
            : user.photoUrl
          }
        />
        <h3 data-testid="profileUsername" className="font-bold text-xl text-white ml-5">
          {profileUser.name
            ? profileUser.name
            : user.displayName
          }
        </h3>
        <button
          data-testid="signOut"
          className="cursor-pointer bg-transparent border-none outline-none text-white"
          onClick={async () => {
            await auth.signOut();
          }}
        >
          <ExitToAppIcon/>
        </button>
      </div>
      <div className="mt-5 text-whiteSmoke">
        <CalendarHeatmap
          startDate={new Date(new Date().setDate(new Date().getDate() - 120))}
          endDate={new Date()}
          values={commits}
          classForValue={(value) => {
            if (!value) {
              return "color-empty";
            }
            return `color-scale-${value.count}`;
          }}
          tooltipDataAttrs={(value:any) => {
            if (!value || !value.date) {
              return null;
            }
            return {
              "data-tip": `${value.date} has count: ${
                value.count
              }`,
            };
          }}
        />
        <ReactTooltip/>
      </div>
      {/* <div>
        {commits.map((cm) => (
          <>
            <p>{cm.date}</p>
            <p>{cm.count}</p>
          </>
        ))}
      </div> */}
    </div>
  )
}

export default User

備考

react-calendar-heatmapのrepo

Comments

[hoshi-takanori]

timestamp が null みたいですけど…。console.log で doc.data() の内容を確認してみては？
あと、toDate() するなら interface Commit の date の型は Date のような…。

[moyong]

hoshi-takanoriさん、ありがとうございます。
返事が遅れてしまい申し訳ありません。
interfaceを修正して、useEffect内でconsole.logを呼ぶよう記述して記録をPostすると一部のドキュメントのtimestampがnilになっていることが確認できました。

Answer 1

こちらを参考に、ドキュメント作成時のtimestampの値を変更したところ、timestampがnilになる事態を避けることができました。

timestamp: firebase.firestore.FieldValue.serverTimestamp()

を

timestamp: firebase.firestore.Timestamp.now(),

に変更しました。