如何存储下载 url 并从集合中检索它们答案

【问题标题】：How to store download urls and retrieve them from a collection如何存储下载 url 并从集合中检索它们
【发布时间】：2022-01-23 15:42:03
【问题描述】：

我有一个将数据和图像发送到 firebase（firestore）的表单。我创建了一个只存储 url 的集合。我需要的是一种基于文档引用 ID 查询不同图像 url 的方法，因为在我的层次结构中，最后一个集合创建具有唯一 ID 的文档，我无法查询它们以获取图像 url。

Form.js

import { useSelector } from "react-redux";
import { db, storage } from "../../firebase";
import {
  addDoc,
  collection,
  doc,
  updateDoc,
} from "@firebase/firestore";
import { getDownloadURL, ref, uploadBytes } from "@firebase/storage";
import { useSession } from "next-auth/react";


function Form() {

  const { data: session } = useSession();
  const Images = useSelector((state) => state.draggedImages.images);
  const imageTarget = Images.length - 1;


  const SendPost = async () => {
    const docRef = await addDoc(collection(db, "posts"), {
      id: session.user.uid, 
      AdDescription: description,
  
    });

    Images[imageTarget].map((Img) => {
      const imageRef = ref(storage, `posts/${docRef.id}/${Img.name}`);
      uploadBytes(imageRef, Img, "data_url").then(async () => {
        const downloadURL = await getDownloadURL(imageRef);
        await updateDoc(doc(db, "posts", docRef.id), {
          image: downloadURL,
        });

        // ---------------HERE IS THE PROBLEM--------------
        await addDoc(collection(db, "ImageUrl", docRef.id, "Urls"), {
            image: downloadURL,
          });
        // --------------------------------------------------
       
      });
    }); 
  };
}

export default Form;

上传图片后，我必须将它们放入轮播中。

Carousel.js

import {
    collection,
    doc,
    onSnapshot,
    orderBy,
    query,
    getDocs,
  } from "@firebase/firestore";
  import { useRouter } from "next/router";
  import React, { useEffect, useRef, useState } from "react";
  import { db } from "../../firebase";
  
  function Carousel() {
    const [FetchedImages, setFetchedImages] = useState([]);
    const router = useRouter();
    const { id } = router.query;

    useEffect(
      () =>
        onSnapshot(doc(db, `ImageUrl/${id}`), (snapshot) => {
          setFetchedImages(snapshot.data());
        }),
      [db]
    );
  
    console.log("fetched : ", FetchedImages); // returns undefined 
 
  }
  
  export default Carousel;

【问题讨论】：

返回未定义？这是您在获取 ImageUrl/id 文档时遇到的问题吗？

标签： reactjs firebase google-cloud-firestore next.js

【解决方案1】：

Form.js 中定义的层次结构非常好。问题实际上是使用 useEffect 从 Carousel.js 检索数据的方式。

在resource 之后，这是我使用的更新且有效的解决方案。

Carousel.js

  useEffect(() => {
    const FetchedImagesFromFirestore = async () => {
      const querySnapshot = await getDocs(
        collection(db, `ImageUrl/${id}/Urls`)
      );
      querySnapshot.forEach((doc) => {
        setFetchedImages((prevState) => [...prevState, doc.data()]);
      });
    };

    FetchedImagesFromFirestore();
  }, [db]);

【讨论】：