クエリパラメータでfirebeseのドキュメントを更新する方法

firebase

2022.10.23 2022.10.22

next.js を使用して todo アプリを作成した際に、下記の点で大いに躓いた。

対象 todo を編集すべく、対象 todo をクリックしたら todo の id をクエリパラメータで渡して、examle.com/editing で編集しようとしたが、上手くいかなかった。

結論
上手く行かなかった原因
1. なぜ上手く行かなかったのか
実装方法解説

結論

下記でクエリパラメータを取得し、その値を元に firebase へアクセスして、必要なデータを取得して input の中へ表示できるようになった。

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const postId = params.get('postId')
    setPostId(postId)

    const getTodo = async () => {
      const docRef = doc(db, "todos", postId);
      await getDoc(docRef).then((doc) => {
        const todo = doc.data();
        setTodoContent(todo.content);
        setTodoDetail(todo.detail);
      });
    };
    getTodo();
  }, []);

上手く行かなかった原因

まずは、コード。

 const postId: string = typeof router.query.postId === 'string' && router.query.postId;

 (async () => {
    const docRef = doc(db, "todos", postId);
    const docSnap = await getDoc(docRef);
    const todo: any = docSnap.data();
    setTodoContent(todo.content);
    setTodoDetail(todo.detail);
  })()

即時実行関数で、ページ遷移した時点でpostIdへクエリパラメータの値を入れて、その値を元に、 firebase から対象のドキュメントを取得できるはずだったが、できなかった。

しかし、上記コードのトリガーをonClickにしたら上手くいった。