Firebase Storage调用getDownloadURL报childPath.split不是函数错误

报错原因 #

Firebase Storage 的 child() 方法仅接受字符串类型的子路径参数，你直接传入 Blob 对象作为入参时，方法内部尝试调用字符串的 split() 方法切割路径，而 Blob 对象不存在该方法，因此触发 childPath.split is not a function 报错。
你尝试的 .child(blob.name) 无效，是因为手动创建的 Blob 实例默认不存在 name 属性，只有用户端主动选择上传的 File 实例才会携带该属性。
同时你的上传逻辑也存在路径错误：将 Blob 对象直接拼接进路径字符串 `prodReviews/${blob}` 时，Blob 会被隐式转换为 [object Blob] 字符串，最终生成的存储路径完全不符合预期，就算后续传对参数也无法定位到对应文件。

解决方案 #

1. 先为上传的文件定义合法的字符串格式文件名，不要直接使用 Blob 对象作为路径片段，可结合时间戳、商品ID等保证文件名唯一
2. 推荐直接复用上传时创建的 ref 对象获取下载地址，无需重复构造 ref 避免路径写错

修正后代码示例 #

async function handleSubmitUpload() {
  if (recordedChunks.length) {
    const blob = new Blob(recordedChunks, {
      type: "video/webm",
    });
    // 自定义唯一文件名，可根据业务需求调整命名规则
    const fileName = `review_${productID}_${Date.now()}.webm`;
    const uploadRef = storage().ref(`prodReviews/${fileName}`);
    // 执行上传
    await uploadRef.put(blob);
    console.log("success storing file: " + fileName);
    // 直接复用上传ref获取下载地址，无需重新构造路径
    const videoUrl = await uploadRef.getDownloadURL();
    // 写入Firestore
    await firestore.doc(`products/${productID}`).set({videoUrl}, { merge: true });
    console.log("Review for item uploaded successfully");
    setRecordedChunks([]);
  }
}

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