如何使用React.js将图片上传至Firebase Web v9 旧版代码迁移求助

以下是修改后的适配Firebase Web v9的完整代码：

import { useSession } from 'next-auth/client';
import { useRef, useState } from 'react';
import { db, storage } from '../firebase';
// 新增v9模块化API导入
import { addDoc, collection, serverTimestamp, doc, setDoc } from "firebase/firestore";
import { ref, uploadString, getDownloadURL } from "firebase/storage";

function InputBox() {
    const [session] = useSession();
    const inputRef = useRef(null);
    const filepickerRef = useRef(null);
    const[imageToPost, setImageToPost] = useState(null);

    const sendPost = (e) => {
        e.preventDefault();

        if (!inputRef.current.value) return;

        // 调整Firestore新增文档的写法为v9函数式调用
        addDoc(collection(db, 'posts'), {
            message: inputRef.current.value,
            name: session.user.name,
            email: session.user.email,
            image: session.user.image,
            timestamp: serverTimestamp()
        }).then(docRef => {
            if (imageToPost) {
                // 调整storage引用创建方式
                const imageRef = ref(storage, `posts/${docRef.id}`);
                const uploadTask = uploadString(imageRef, imageToPost, 'data_url')

                removeImage();

                uploadTask.on('state_change', null, error => console.error(error), 
                () => {
                    // 上传完成后获取下载链接
                    getDownloadURL(imageRef).then(url => {
                        // 合并更新文档的图片字段
                        setDoc(doc(db, 'posts', docRef.id), {
                            postImage: url
                        },
                        { merge: true}
                        );
                    });
                });
            }
        });

        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 (/* 此处保留原有JSX代码即可 */)
}

核心改动说明 #

• 依赖导入：移除旧版本全局firebase对象导入，改为v9模块化API单独导入需要的Firestore、Storage相关方法
• Firestore操作：原链式调用db.collection().add()改为addDoc(collection(db, 集合名), 文档数据)写法，服务端时间戳直接使用导入的serverTimestamp()方法
• Storage操作：存储引用创建、字符串上传、下载链接获取均改为函数式调用，传入已初始化的storage实例作为第一个参数，逻辑和原版本完全一致
• 前置要求：需要先确保你的../firebase配置文件已经按照v9规范完成初始化，才能正常运行上述代码

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