延續上一篇，今天繼續研究 Firestore Database 的資料操作，

溫馨提醒：以下內容看到的 showNotify 是我個人封裝使用的提示彈窗，並不是 Firebase 的功能。有需要的話，可以放入自己需要的內容或執行其他處理。

讀取單一筆資料

無論是以顧客角度觀看單一店家或服務詳細頁面、或者某一店家要維護相關資料，皆須先在頁面上取得資料並呈現，才有後續的操作，所以先學會如何取得單一資料吧。

1. 首先需引入 Firebase 的資料庫引用與讀取的函式

import { doc, getDoc } from "firebase/firestore";
import { db } from "../firebase";

2. 使用 react-router-dom 的 useParams 方法取得單一資料 id
   當初規畫路徑時，就有將單一資料的 id 傳入作為路由的 query 值，所以進到單一頁面後，先取得該筆資料 id 值(當然也可以使用其他方式，就看個人習慣)。

import { useNavigate, useParams } from "react-router-dom";
const params = useParams();

3. 於頁面一載入時，偵測 url 上的 query 值做讀取資料 API
   storeId 僅是我專案中某頁的 id。整體運作原理和取得整筆列表資料時一樣，就是把值按照對的結構與順序傳入即可。列表頁只需傳入文件名稱，單一資料時則須傳入 id。

useEffect(() => {
    async function fetchStore() {
      const docRef = doc(db, "listings", params.storeId);
      const docSnap = await getDoc(docRef);
      
      console.log("docSnap =>", docSnap)
    }
    fetchListing();
 }, [navigate, params.storeId]);

更新單一筆資料

取得單一筆資料成功後，就可以試試看呼叫更新的 API 了！

1. 首先需引入 Firebase 的資料庫引用與讀取的函式

import { doc, getDoc, updateDoc } from "firebase/firestore";
import { db } from "../firebase";

2. 使用 react-router-dom 的 useParams 方法取得單一資料 id

import { useNavigate, useParams } from "react-router-dom";
const params = useParams();

3. 新增要更新資料時的 function，呼叫 updateDoc 函式
   更新的重點就是要將要更新的那筆資料 id 先傳入，讓 Firestore Database 知道要去撈哪筆資料，然後才在 updateDoc 裡的第二個值中，使用 object 格式更新要更新的值。

async function onSubmit(e) {
    e.preventDefault();
    try {
      const docRef = doc(db, "stores", auth.currentStore.uid);
      await updateDoc(docRef, {
          一些要更新的值
      });
      
      showNotify("success", "更新成功");
    } catch (error) {
      console.log("error => ", error);
    }
 };

小結

目前畫面實作先放上一小部分截圖如下圖。明天則會研究如何在 Firebase 裡上傳圖片！