未处理的拒绝 (FirebaseError)：使用无效数据调用函数 addDoc()

Question

import React,{ useContext,useState } from 'react'
import "./style.css";
import { SignInBtn } from '../../componenets'
import { UserContext} from '../../contexts/user';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import makeId from '../../helper/functions';
import { storage ,db } from '../../firebase';
import firebase from "firebase";


export default function CreatePost() {
    const [user, setUser] = useContext(UserContext).user;
    const [caption, setCaption] = useState("");

    const [image, setImage] = useState(null);

    const [progress, setProgress] = useState(0);

    const handleChange = (e) => {
        if(e.target.files[0]){
            setImage(e.target.files[0]);

            var selectedImageSrc=URL.createObjectURL(e.target.files[0]);
        
            var imagePreview =  document.getElementById("image-preview");

            imagePreview.src=selectedImageSrc;
            imagePreview.style.display="block";
        }

    };

    const handleUpload =() => {
        if(image){
            var imageName = makeId(10);
            const uploadTask=storage.ref(`images/${imageName}.jpg`).put(image);

            uploadTask.on("state_changed",(snapshot) =>{
                // progress function

                const progress=Math.round((snapshot.bytesTransferred/snapshot.totalBytes)*100);

                setProgress(progress);
            }, (error) => {
                console.log(error);
            }, () => {
                //get download url and upload the post info

             storage
            .ref("images")
            .child(`${imageName}.jpg`)
            .getDownloadURL()
            .then((imageUrl) => {

                   db.collection("posts").add({
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                    caption:caption,
                    photoUrl: imageUrl,
                    username: user.email.replace("@gmail.com",""),
                    profileUrl: user.photoUrl

                });
                })
            });
        }
    }; //handle upload check image exist

    return (
        <div className = "createPost">
           
        {user ? (
            <div className ="createPost__loggedIn">
            <p> Create Post </p>
            <div className ="createPost__loggedInCenter">
                <textarea className ="createPost__textarea"
                rows ="3"
                placeholder="Enter Caption Here"
                value ={caption}
                onChange = {(e) => setCaption(e.target.value)}    >            
                </textarea>

                <div className="createPost__imagePreview">
                  <img id="image-preview" alt="" />
                </div>
            </div>
           
            <div className="createPost__loggedInBottom">
            <div class ="createPost__imageUpload">
            <label htmlFor ="fileInput"><AddAPhotoIcon style = {{cursor:"pointer",fontSize :"20px"}}/>
            </label>
            <input id ="fileInput" 
            type ="file"
             accept ="image/*"
              onChange ={handleChange}/>
            </div>
            <button className = "createPost__uploadBtn" 
            onclick ={handleUpload} 
            style = {{color : caption ? "#000" : "lightgrey"}}>
                {`Upload ${progress !=0 ? progress: ""}`}
                </button>
            </div>
            </div>
            ) : (
                <div> 
                    <SignInBtn/>
                        <p style ={{marginLeft : "12px"}}> To post and Comment</p>
                </div> 
            )}

           
        </div>
    );
}

问题出在这一行

db.collection("posts").add

我是不是漏掉了什么？

现在的问题是我正在尝试克隆 Instagram，但问题是一切正常，但下面一行出现了问题，它给出了一个错误：

Unhandled Rejection (FirebaseError): Function addDoc() called with invalid data. Unsupported field value: undefined (found in field profileUrl in document posts/K5KaPhmXmT2nCHmFZb2i)

谢谢

Answer 1

您上传的文档有两个 photoUrl 字段。

其中一个是使用 user.photoUrl 设置的，它将始终是 undefined，因为 Firebase User 对象的正确属性名称是 photoURL（注意大写字母）。也有可能这个属性没有设置图片，所以你应该确保在尝试存储它之前检查一下。

未处理的拒绝 (FirebaseError)：使用无效数据调用函数 addDoc()

Unhandled Rejection (FirebaseError): Function addDoc() called with invalid data

firebase

reactjs

react-redux

reactfire

google-cloud-firestore