Bagaimana untuk memulakan cangkuk dengan data yang hanya boleh diakses selepas dipasang?

Question

Berikut ialah contoh perkara yang saya cuba lakukan:

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>
    )
}

Seperti yang anda lihat, saya menggunakan nilai id untuk memulakan cangkuk useCollection. Walau bagaimanapun, id berubah dan mula-mula tidak ditentukan dan kemudian berubah kepada nilai yang betul. Ini menjadikan semuanya rosak dan perkara di atas tidak berfungsi dalam skrip taip. Saya perlu memulakan cangkuk useCollection selepas menentukan id, yang hanya selepas komponen "dipasang". Saya cuba meletakkan useCollection(...) di dalam useEffect tetapi ia tidak berfungsi.

Answer 1

Memandangkan anda menggunakan nextjs, anda boleh memanfaatkan getServerSideProps untuk menjana id bagi komponen anda sebagai prop awal supaya ia akan sentiasa ditakrifkan:

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

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

dan anda menerimanya sebagai prop daripada komponen:

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