如何用只有掛載後才能存取的資料來初始化鉤子？

Question

這是我正在嘗試做的事情的範例：

import { useRouter } from "next/router";

import { useCollection } from "react-firebase-hooks/firestore";
import { db } from "@/firebase/clientApp";
import { collection } from "firebase/firestore";

export default function Test(){
    const router = useRouter();
    const {id} = router.query
    const [data, dataLoading, dataError] = useCollection(collection(db, "drafts", id), {})

    return(
    <div>Hello!</div>
    )
}

如您所見，我使用 id 的值來初始化 useCollection 掛鉤。但是，id 會發生變化，並且首先是未定義的，然後變更為正確的值。這使得整件事情崩潰了，上面的內容在打字稿中甚至無效。我需要在定義 id 之後初始化 useCollection 鉤子，這僅在組件「安裝」之後。我嘗試將 useCollection(...) 放在 useEffect 中，但它不起作用。

Answer 1

由於您使用的是 nextjs，因此您可以利用 getServerSideProps 為您的元件產生 id 作為初始道具，因此它將始終被定義：

export async function getServerSideProps({ params }) {
  const id = params.id;

  return {
    props: {
      id,
    },
  };
}

並且您從元件中收到它作為道具：

export default function Test({id}){
 //...
}