React Native Expo应用中Firestore 9.x.x图片存储异常求助

核心问题排查 #

1. Firebase Storage模块未导入
   你的Firebase配置文件仅导入了Auth和Firestore模块，缺少Storage模块的导入，导致无法正常调用Storage的上传接口，这是图片无法存入存储桶的直接原因。

2. 操作顺序逻辑缺陷
   当前代码先创建Firestore文档（存入本地图片URI），再尝试上传图片。一旦上传失败会触发报错，但文档已经写入数据库，就会出现「报错但文档存在」的矛盾情况。同时，即使上传成功，你也没有更新Firestore里的image字段为存储桶的下载URL，导致数据库里存的还是本地URI。

3. 错误提示语法问题
   alert("Error creating date: ", error) 里的逗号会导致error对象无法正确显示，应该用加号拼接字符串，才能看到具体错误信息。

具体修复步骤 #

1. 补全Firebase Storage模块导入

修改你的Firebase配置文件：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
// 新增Storage模块导入
import "firebase/compat/storage";

const firebaseConfig = {
  // 你的配置信息
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

export { firebase };

2. 调整操作顺序，确保数据一致性

推荐先完成图片上传并获取下载URL，再创建Firestore文档；或者创建文档后上传图片，成功后更新文档的image字段。以下是第二种方案的代码修改（保留文档创建的原子性，同时修正字段值）：

const handleCreate = async (email) => {
  const currentUser = firebase.auth().currentUser;
  if (!currentUser) {
    alert("Error: Not logged in");
    return;
  }
  try {
    const dateRef = firebase.firestore().collection("dates").doc();
    
    // 先上传图片，拿到存储桶的下载URL
    let imageUrl = image;
    if (image) {
      const ref = firebase.storage().ref().child(`images/${dateRef.id}`);
      const response = await fetch(image);
      const blob = await response.blob();
      await uploadBytes(ref, blob);
      imageUrl = await ref.getDownloadURL();
    }

    // 写入Firestore，直接用存储桶的URL
    await dateRef.set({
      title,
      location,
      image: imageUrl,
      date,
      requests: [],
      hosted_by: currentUser.uid,
      created_at: firebase.firestore.FieldValue.serverTimestamp(),
    });

    // 清空表单
    setTitle("");
    setLocation("");
    setImage("");
    setDate(new Date());
    alert("Date has been created successfully!");
    navigation.navigate("Home");
  } catch (error) {
    // 修正错误提示，显示具体错误信息
    alert("Error creating date: " + error.message);
    // 可选：如果上传失败，删除已创建的空文档
    // await dateRef.delete();
  }
};

3. 可选：优化Expo图片URI的处理

如果fetch本地URI仍然有问题，可以改用Expo FileSystem读取图片：
首先安装依赖：expo install expo-file-system
然后修改上传部分的代码：

import * as FileSystem from 'expo-file-system';

// ...

// 替换原有的fetch+blob逻辑
const blob = await new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.onload = function () {
    resolve(xhr.response);
  };
  xhr.onerror = function (e) {
    reject(new TypeError("Network request failed"));
  };
  xhr.responseType = "blob";
  xhr.open("GET", image, true);
  xhr.send(null);
});

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