自定义挂钩从 Firestore 返回空数组

Question

我是一名新近自学成才的编码员。希望我充分表达了我的情况。

我正在尝试从 Cloud Firestore 检索一些数据。我制作了一个自定义挂钩，它应该将 useState 和 setDocuments 作为检索到的“指南”。该查询使用 useParams 获取 id 以匹配我要获取的特定指南。我认为问题出在查询快照中。 setDocuments 似乎不起作用。当我控制台记录“文档”时，它是一个空数组。

有线索吗？

import { useParams } from 'react-router-dom'
import { collection, query, where, getDocs } from "firebase/firestore";
import { db } from "../firebase/config"
import { useEffect } from 'react';

export const useGuide = (c) => {
  const [documents, setDocuments] = useState([])
  const { id } = useParams()

  useEffect(() => {

    const ref = collection(db, c)
    const q = query(ref, where("id", "==", `${id}`))

    getDocs(q).then(querySnapshot => {
      querySnapshot.forEach((doc) => {
        setDocuments(doc.data()) 
      });
    });
  }, [])

  console.log(documents)

  return { documents }
}

这里是我尝试使用挂钩 useGuide 来设置将传递给组件的状态的地方。

import SingleGuide from '../../components/SingleGuide/SingleGuide'
import { useGuide } from '../../hooks/useGuide'

function Guide() {
    const { documents: guides } = useGuide('guides')
    console.log(guides)
                
  return (
      <div>
          {guides && <SingleGuide guide={guides}/>}
      </div>
  )
}

export default Guide

Answer 1

您的代码存在一些问题，包括将文档数组设置为等于查询结果中的单个文档。尝试如下操作。

import { useParams } from "react-router-dom";
import { collection, query, where, getDocs } from "firebase/firestore";
import { db } from "../firebase/config";
import { useState, useEffect } from "react";

export const useGuide = (c) => {
  const [documents, setDocuments] = useState([]);
  const { id } = useParams();

  useEffect(() => {
    // create array to hold all the individual docs
    const docs = [];
    const ref = collection(db, c);
    const q = query(ref, where("id", "==", `${id}`));

    getDocs(q).then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        docs.push(doc.data());
      });

      setDocuments(docs);
    });
  }, [c]); // could consider passing `id` to the hook instead of useParams and adding that as a dependency to update data automatically

  console.log(documents);

  return { documents };
};

自定义挂钩从 Firestore 返回空数组

Custom Hook Returning Empty Array From Firestore

javascript

firebase

reactjs

google-cloud-firestore

react-hooks