Comment initialiser un hook avec des données accessibles uniquement après le montage ?

Question

Voici un exemple de ce que j'essaie de faire :

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

Comme vous pouvez le voir, j'utilise la valeur de id pour initialiser le hook useCollection. Cependant, l'identifiant change et n'est d'abord pas défini, puis prend la valeur correcte. Cela fait que tout s'effondre et ce qui précède ne fonctionne même pas en dactylographie. Je dois initialiser le hook useCollection après avoir défini l'identifiant, c'est-à-dire seulement après que le composant soit "installé". J'ai essayé de mettre useCollection(...) dans useEffect mais cela ne fonctionne pas.

Answer 1

Puisque vous utilisez nextjs, vous pouvez exploiter getServerSideProps pour générer l'identifiant de votre composant comme accessoire initial afin qu'il soit toujours défini :

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

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

et vous le recevez en accessoire du composant :

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