升级到Firebase v9后站点文件上传至Firebase Storage功能失效报错求助

问题原因 #

你遇到的报错是因为Firebase v9 完全重构了API风格，废弃了v7/v8版本用的命名空间链式调用写法，改为函数式模块化API，因此旧版本的projectStorage.ref()、collection.add()这类写法不再生效。

代码修改方案 #

1. 确认../Firebase配置文件导出的projectStorage、projectFirestore是模块化初始化的实例即可，不需要修改配置文件的前提下，直接修改useStorage.jsx代码如下：

import { projectStorage, projectFirestore } from '../Firebase'
import { useEffect, useState } from 'react'
// 新增导入Firebase v9模块化API
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { collection, addDoc, serverTimestamp } from "firebase/firestore";


function useStorage(file) {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);
   
    useEffect(() => {
        // 生成storage引用，替换原projectStorage.ref写法
        const storageRef = ref(projectStorage, file.name)
        // 生成集合引用，替换原projectFirestore.collection写法
        const collectionRef = collection(projectFirestore, 'images');
        // 初始化上传任务，替换原storageRef.put写法
        const uploadTask = uploadBytesResumable(storageRef, file);

        uploadTask.on('state_changed', (snap) => {
            let percent = (snap.bytesTransferred / snap.totalBytes) * 100;
            setProgress(percent >> 0); // or Math.trunc() 
        }, (err) => {
            setError(err);
        }, async () =>{
            // 获取下载链接，传入storageRef作为参数
            const url = await getDownloadURL(storageRef);
            const createdAt = serverTimestamp();
            // 新增文档，替换原collectionRef.add写法
            await addDoc(collectionRef, { url, createdAt});
            setUrl(url);
        });

    }, [file]);

    return {progress, url, error};
}

export default useStorage;

2. 关键修改点说明

• 所有操作存储桶引用、文件上传、获取下载链接的方法都改为从firebase/storage包单独导入，函数第一个参数接收初始化好的storage实例
• Firestore的集合引用、新增文档方法从firebase/firestore包单独导入，时间戳方法统一用serverTimestamp()替代旧版本的timestamp()

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