React上传图片到Firebase Storage成功未入Cloud Firestore报404如何解决

问题根因 #

核心错误是存储路径的模板字符串语法错误，导致上传路径和后续查询下载URL的路径不一致：

• 上传时使用普通单引号包裹路径，且变量插值${}中间带了多余空格，'images/$ {image.name}'不会被解析为动态路径，会直接作为字面量路径存储文件，实际存储路径不是预期的images/[你的文件名]
• 后续查询下载URL时使用了正确的动态文件名拼接路径，自然找不到对应存储对象，报404错误，也就不会执行then回调中写入Cloud Firestore的逻辑，导致数据库无数据。

解决方案 #

1. 修正上传路径语法 #

将上传路径的单引号替换为模板字符串专用的反引号（），删掉${}`中间的空格：

// 修正前错误写法
// const uploadTask= storage.ref('images/$ {image.name}').put(image);

// 修正后写法
const uploadTask = storage.ref(`images/${image.name}`).put(image);

2. 优化下载URL获取逻辑（可选，避免路径不一致问题） #

直接从上传任务的返回快照中获取存储引用，不需要手动再次拼接路径，彻底避免前后路径不一致的问题：

// 原完成回调中的写法
// storage
// .ref("images") 
// .child(image.name)
// .getDownloadURL()

// 优化后写法
uploadTask.snapshot.ref.getDownloadURL()

其他注意事项 #

• 确认Firebase Storage安全规则已开放对应路径的读写权限，测试阶段可临时使用宽松规则，上线前需替换为权限控制规则
• 建议给文件名添加时间戳/随机前缀，避免重名文件互相覆盖，示例：images/${Date.now()}_${image.name}

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