Wie initialisiere ich einen Hook mit Daten, auf die erst nach dem Mounten zugegriffen werden kann?

Question

Hier ist ein Beispiel dafür, was ich zu tun versuche:

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

Wie Sie sehen können, verwende ich den Wert von id, um den useCollection-Hook zu initialisieren. Die ID ändert sich jedoch und ist zunächst undefiniert und ändert sich dann in den richtigen Wert. Dadurch bricht das Ganze zusammen und das oben Gesagte funktioniert nicht einmal in Typoskript. Ich muss den useCollection-Hook nach der Definition der ID initialisieren, was erst geschieht, nachdem die Komponente „installiert“ wurde. Ich habe versucht, useCollection(...) in useEffect einzufügen, aber es funktioniert nicht.

Answer 1

由于您使用的是 nextjs，因此您可以利用 getServerSideProps 为您的组件生成 id 作为初始道具，因此它将始终被定义：

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

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

并且您从组件中收到它作为道具：

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