Firestore文档引用属性在浏览器环境始终返回undefined

核心问题分析 #

你遇到的情况是浏览器环境查询时vendor字段始终为undefined，但模拟器/测试环境正常、控制台字段存在，结合你的代码和Firebase v9.19.1版本，主要排查以下几个方向：

1. 安全规则限制字段读取 #

生产环境的Firestore安全规则可能限制了vendor字段的读取权限，而模拟器使用的测试规则未做限制。比如规则中仅允许读取price、quantity，未包含vendor，导致浏览器端查询时字段被过滤。

解决方法：
检查并修改Firebase控制台的Firestore安全规则，确保读取文档时允许访问vendor字段。示例规则：

match /stockItems/{itemId} {
  allow read: if request.auth != null; // 根据你的权限需求调整
  // 避免使用限制字段列表的规则，比如不要写`resource.data.keys().hasAll(['price', 'quantity'])`
}

2. 自定义转换器的fromFirestore使用异步函数（关键错误） #

Firebase v9的FirestoreDataConverter不支持异步的fromFirestore方法——doc.data()是同步调用的，异步函数会导致解析逻辑失效，最终返回的vendor字段异常。

解决方法：
将转换器改为同步逻辑，仅解析原始数据，把异步获取vendor的逻辑放到查询后处理：

修改转换器： #

private converter: FirestoreDataConverter<StockItem> = {
  toFirestore: (stockItem) => {
    const data = {...stockItem};
    data.vendor = this.vendorDAO.docRef(stockItem.vendor);
    return data;
  },
  fromFirestore: (snapshot, options) => {
    const data = snapshot.data(options); // 传入options确保获取完整字段
    return StockItem.fromJSONWithId({...data}, snapshot.id);
  }
}

修改查询代码： #

// 确保查询绑定了转换器
const stockSnapshot = await getDocs(stockQuery.withConverter(this.converter));
// 用Promise.all处理异步获取vendor
const retrievingData = await Promise.all(stockSnapshot.docs.map(async (doc) => {
  const item = doc.data();
  item.vendor = await this.vendorDAO.retrieve(item.vendor.id);
  return item;
}));

3. 浏览器缓存导致旧数据 #

浏览器可能缓存了未包含vendor字段的旧文档数据，强制从服务器获取即可解决：

const stockSnapshot = await getDocs(stockQuery, { source: 'server' });

4. 字段名大小写不匹配 #

检查控制台中文档的字段名是否与代码中vendor完全一致（比如是否是Vendor大写开头），虽然模拟器正常但仍需排除此可能。

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