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

Posted 2023-03-22

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

【英文标题】：FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined

【发布时间】：2021-12-26 16:30:55

【问题描述】：

所以在这里我想将来自 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 存储中

【参考方案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));
  );
);

【参考方案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”之前执行

【讨论】：

未处理的拒绝 (FirebaseError)：使用无效数据调用函数 addDoc()。不支持的字段值：未定义（在文档菜单/starters/veg Manchurian/3uGgyCcyyQ3KoS60qcUk 中的字段图像中找到）

@AnirudhSaladi 问题可能是因为状态没有更新，尝试不使用状态直接放入数据

是的，有效。我使用了 putUrl(url)// 感谢您的帮助