未处理的拒绝（TypeError）：observer.complete.bind不是函数

它主要类似于instagram，当用户尝试上传帖子时，我尝试将图像上传到firebase，但是上传完成后会出现此错误。

未处理的拒绝（TypeError）：observer.complete.bind不是函数

图片已成功上传，但未在应用中显示（似乎问题出在该链接firebase的问题所在）

ImageUpload.js：

import { Button } from "@material-ui/core";
import React, { useState } from "react";
import { db, storage } from "../database/firebase";
import firebase from "firebase";

function ImageUpload({ nickname }) {
  // States
  const [caption, setCaption] = useState("");
  const [image, setImage] = useState(null);
  const [progress, setProgress] = useState(0);

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

  const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on(
      firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // Progress function...
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(progress);
      },
      (error) => {
        // Error function...
        console.log(error);
      },
      // Complete function...
      storage
        .ref("images")
        .child(image.name)
        .getDownloadURL()
        .then((url) => {
          // Post image inside db
          db.collection("posts").add({
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            caption: caption,
            imageURL: url,
            username: nickname,
          });
          setProgress(0);
          setCaption("");
          setImage(null);
        })
    );
  };

  return (
    <div>
      <progress value={progress} max="100" />
      <input
        type="text"
        placeholder="Enter a caption..."
        onChange={(event) => setCaption(event.target.value)}
        value={caption}
      />
      <input type="file" onChange={handleChange} />
      <Button onClick={handleUpload}>Upload</Button>
    </div>
  );
}

export default ImageUpload;