Next.js中使用Firebase Storage上传图片遇Bad Request错误求助

我正在学习Next.js的视频教程，但教程使用的Firebase版本已过时。我通过官方文档完成了大部分步骤，但在实现图片上传到Firebase时遇到问题，尝试相关方案后仍未解决，出现如下错误：

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Bad Request

我的InputBox组件代码： #

import Image from "next/image";
import { useSession } from "next-auth/react";
import { FaceSmileIcon } from "@heroicons/react/24/outline";
import { VideoCameraIcon, PhotoIcon } from "@heroicons/react/20/solid";
import { useRef } from "react";
import { db, storage } from "../firebase";
import { collection, addDoc, serverTimestamp, doc, setDoc } from "firebase/firestore";
import { useState } from "react";
import {ref, uploadString, getDownloadURL, getStorage} from "firebase/storage";

function InputBox() {

    const {data: session} = useSession();
    const inputRef = useRef(null);
    const filePickerRef = useRef(null);
    const [imageToPost, setImageToPost] = useState(null);

    const sendPost = async (e) => {
        e.preventDefault();
        if(!inputRef.current.value) return;

        const colRef = collection(db, "posts")

        await addDoc(colRef, {
            message: inputRef.current.value,
            name: session.user.name,
            email: session.user.email,
            image: session.user.image,
            timestamp: serverTimestamp(),
        }).then((document) => {
            if(imageToPost) {
                const storageRef = ref(storage, `posts/${document.id}`);
                uploadString(storageRef, imageToPost, "data_url").then((snapshot) => {
                    getDownloadURL(snapshot.ref).then(URL => {
                        setDoc(doc(db, "posts", document.id), 
                        {imageToPost: URL}, {merge: true}
                        );
                    });
                })
                removeImage();
            }
        })
        inputRef.current.value = "";
    };

    const addImageToPost = (e) => {
        const reader = new FileReader();
        if(e.target.files[0]) {
            reader.readAsDataURL(e.target.files[0]);
        }

        reader.onload = (readerEvent) => {
            setImageToPost(readerEvent.target.result);
        }
    };

    const removeImage = () => {
        setImageToPost(null);
    };

    return ( <HERE THE REST OF THE CODE>

我尝试过的修改： #

在创建storageRef前重新获取storage实例：

.then((document) => {
   if(imageToPost) {
      const storage = getStorage();
      const storageRef = ref(storage, `posts/${document.id}`);

<MORE CODE>

我的firebase.js配置文件： #

import { initializeApp } from 'firebase/app';
import { getStorage } from "firebase/storage";

const firebaseConfig = {
    apiKey: "APIKEY-HERE",
    authDomain: "AUTHDOMAIN-HERE",
    projectId: "PROJECT-ID-HERE",
    storageBucket: "STORAGE-BUCKET-HERE",
    messagingSenderId: "MESSAGING-SENDER-HERE",
    appId: "APPID-HERE"
  };


  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  const storage = getStorage(app);

  export { db, storage };

我已尝试各种方案仍无法解决，恳请各位提供帮助。

内容的提问来源于stack exchange，提问作者Zaesar