在Firebase存储视频Blob自定义名称返回undefined且上传覆盖文件如何解决

• Blob构造函数的使用不符合语法规范：Blob构造函数仅支持2个入参，第一个为数据块数组，第二个为配置对象，仅可传入type、ending两个合法属性。你自定义的Name属性不会被挂载到Blob实例上，导致blob.Name取值为undefined，所有文件最终上传路径均为prodReviews/undefined，自然每次上传都会覆盖旧文件。
• 代码存在多余错误逻辑：声明了promises数组但未实际使用，await promises.push(uploadTask)的写法完全错误，push是同步操作无需await，你当前是单文件上传场景也不需要批量Promise处理逻辑。
• 多余的await关键字：storage().ref()是同步方法，不需要加await调用。

修改后的完整代码如下：

import { useParams, useHistory } from "react-router-dom";
const { productID } = useParams();

async function handleSubmitUpload() {
        if (recordedChunks.length) {
            // 修正Blob构造函数参数
            const blob = new Blob(recordedChunks, { type: "video/webm" });
            // 生成唯一文件名：用户ID+时间戳+随机字符串，彻底避免重名
            const fileName = `${auth.currentUser.uid}_${Date.now()}_${Math.random().toString(36).slice(2, 10)}.webm`;
            // 生成存储引用，去掉多余的await
            const reviewRef = storage().ref(`prodReviews/${fileName}`);
            // 直接用已生成的引用上传，不需要重复调用ref
            await reviewRef.put(blob);
          
            const videoUrl = await reviewRef.getDownloadURL();
            const timestamp = new Date();

            await firestore
                .collection("products")
                .doc(productID)
                .collection("productReviewClips")
                .add({videoUrl, userID: auth.currentUser.uid, createdDate: timestamp }) 

            history.push(`/product/${productID}`);
            setRecordedChunks([]);
        }
    }

• 文件名采用「用户ID+时间戳+8位随机字符串」的组合规则，重名概率无限趋近于0，完全满足业务场景需求。
• 删除了所有冗余错误代码，上传逻辑执行效率更高。
• 复用已创建的Storage引用，避免重复实例化带来的不必要性能消耗。

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