Firestoreからデータを１件取得してReactで表示する簡単なサンプル

import React, {useState,useEffect} from "react";
import * as ReactDOM from "react-dom/client";
import { initializeApp } from "firebase/app";
import { getFirestore,collection, getDoc,doc } from "firebase/firestore";

const firebaseConfig = {
  //firebaseからコピー
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

function App(){
  const [name,setName] = useState("");
  useEffect(() => {
    const docRef = doc(db,"test","yGhMBQE4ZETTzA5Y9CkC");
    getDoc(docRef).then((docSnap) => {
    console.log(docSnap.data());
    setName(docSnap.data().name)})
  })
  return(
    <div>
      <h1>Firestore</h1>
      
      <h2>{name}</h2>
    </div>
  );
}