Firestoreを使ってTodoListを作ろうとしたらちょっと詰まった話

React+TypeScript+Firebase CRUD&認証
こちらの記事を参考にTodoListを作っているときに序盤で少し詰まったので解決策を記事にしておきます。
こちらの記事はFirebase v8で自分の環境がFirebase v9でした。

まずFirebase.tsの部分でv8 -> v9で変更があったので変更しました。

変更前 Firebase.ts

import firebase from "firebase/app"; //firebase APIを取得
import "firebase/auth";
import "firebase/firestore";
import "firebase/app";

//Firebaseオブジェクトの初期化
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

//環境変数を呼び出して各パラメータにセットする
const firebaseApp = firebase.initializeApp(firebaseConfig);

//dbとauthを各React Componentから利用可能にする
export const db = firebaseApp.firestore();
export const auth = firebase.auth();

変更後 Firebase.ts

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

//環境変数を呼び出して各パラメータにセットする
const firebaseApp = initializeApp(firebaseConfig);

//dbとauthを各React Componentから利用可能にする
export const db = getFirestore(firebaseApp);
export const auth = getAuth();

次にApp.tsの部分を変更しました。

App.ts

import React, { useState, useEffect } from "react";
import "./App.css";
import { db } from "./firebase";
+ import { collection, onSnapshot } from 'firebase/firestore'

const App: React.FC = () => {
  const [tasks, setTasks] = useState([{ id: "", title: "" }]);
  useEffect(() => {
-     const unSub = db.collection("tasks").onSnapshot((snapshot) => {
+     const unSub = onSnapshot(collection(db, "tasks"), (snapshot) => {
      setTasks(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          title: doc.data().title,
        }))
      );
    });
    return () => unSub();
  }, []); 

  return (
    <div className="App">
      {tasks.map((task) => (
        <h3>{task.title}</h3>
      ))}
    </div>
  );
};
export default App;

これで一応動くようになりました。
初歩的なものかもしれませんが役に立ったら幸いです。