アプリ作成で詰まったところ(追記)

MUIでスケルトン作成する。

大きさがよくわからず作るのに時間がかかってしまった。
クロームのdevtoolで確認

500*56で作成する。MUIなのでsxでpx指定。Skeletonに直接widthPropなど渡すとちょっと挙動が変わる?
連続するようなものは次のようにして複製するとスッキリする。

const skeletons = [...Array(5)].map(() => <Skeleton variant="rectangular" sx={{ width: "500px", height: "56px", borderRadius: "5px", }} />)

FireStoreで日付を取得して描画する

Firestoreに登録したデータをfetchしたときに日付のデータnullなので落ちる。
そんなときは取得したデータにオプション値を渡すと解決する。

// book型チェック
const asBook = (doc: DocumentSnapshot) => {
  const book = doc.data();
  const errorMsg = "データの取得に失敗しました。"
  // 型チェック
  console.log(book);
  if (typeof book === "undefined") throw new Error(`${errorMsg}_book`)
  if (!("bookId" in book)) throw new Error(`${errorMsg}_bookId`)
  // アサーション部分は省略
  // 型を確定させて返却する際に{ serverTimestamps: "estimate" }とすることで解決
  return { ...doc.data({ serverTimestamps: "estimate" }), id: doc.id } as FetchedBook
}

doc.data({ serverTimestamps: "estimate" })とすることでnullを回避できる。