FirebaseError：使用无效数据调用的函数 addDoc()。不支持的字段值：未定义

Question

所以在这里我想将来自 firebase 存储的图像 URL 存储在 firestore 中。我收到未定义的错误，因为我的 setImgUrl 未定义。请帮我解决这个问题。

import React, { useState } from "react";
import "../mainTab.css";
import "./addScreen.css";

import firebase, { storage } from "../firebase";


const AddScreen = () => {
  const db = firebase.firestore();
  const [cat, setCat] = useState();
  const [course, setCourse] = useState();
  const [name, setName] = useState();
  const [price, setPrice] = useState();
  const [descrip, setDescrip] = useState();
  const [image, setImage] = useState();
  const [imgURL, setImgURL] = useState();

  const onSubmitHandler = (event) => {
    event.preventDefault();

    const ref = storage.ref(`/images/${image.name}`);
    const uploadTask = ref.put(image);
    uploadTask.on("state_changed", console.log, console.error, () => {
      ref.getDownloadURL().then((url) => {
        setImage(null);
        setImgURL(url);
        console.log(imgURL);
      });
    });

    const data = {
      name: name,
      price: price,
      cat: cat,
      course: course,
      decription: descrip,
      image: imgURL,
    };

    db.collection("menu")
      .doc(course.toString())
      .collection(name.toString())
      .add(data)
      .then(() => alert("menu item is posted"))
      .catch((error) => alert("error: " + error));

    setName("");
    setPrice("");
    setCat("");
    setCourse("");
    setImage("");
    setDescrip("");
  };

我需要 setImg 挂钩中的 img URL。 那么在完成上传后有什么办法我应该调用数据库写入函数（我尝试使用没有帮助的标志（假）钩子？ 通过图像完美地上传到 Firebase 存储中

Answer 1

任何需要从 Firebase 下载 URL 的代码，都需要在 then 回调中，从那里调用，或者在以其他方式设置 imgURL 后同步运行。

修复代码的最简单方法是将写入 Firestore 的代码移动到 then 块中，如下所示：

const ref = storage.ref(`/images/${image.name}`);
const uploadTask = ref.put(image);
uploadTask.on("state_changed", console.log, console.error, () => {
  ref.getDownloadURL().then((url) => {
    setImage(null);
    setImgURL(url);
    console.log(imgURL);

    const data = {
      name: name,
      price: price,
      cat: cat,
      course: course,
      decription: descrip,
      image: url, // ? Use url here, as imgURL won't be set yet
    };

    db.collection("menu")
      .doc(course.toString())
      .collection(name.toString())
      .add(data)
      .then(() => alert("menu item is posted"))
      .catch((error) => alert("error: " + error));
  });
});

Answer 2

尝试将此部分放在一个函数中，然后在“then”中调用该函数 比如说

    const putUrl = ()=>{
    db.collection("menu")
      .doc(course.toString())
      .collection(name.toString())
      .add(data)
      .then(() => alert("menu item is posted"))
      .catch((error) => alert("error: " + error));

    setName("");
    setPrice("");
    setCat("");
    setCourse("");
    setImage("");
    setDescrip("");
  }

现在通过这种方式在“then()”中调用 putUrl，这部分代码只有在获取“imgUrl”后才会执行。您收到错误，因为获取“imgUrl”和添加数据都是异步的，并且会在获取“imgUrl”之前执行