Firebase使用.data()获取数据时字段顺序随机的解决方法

Firestore 服务端本身不承诺文档内字段的返回顺序，data() 方法返回的普通 JavaScript 对象的字段枚举顺序不受 SDK 控制，不同版本的 SDK、网络响应包的字段排列差异，都会导致拿到的对象字段顺序随机，这是 Firestore 的设计特性，不属于代码错误。另外你在 Firestore 控制台看到的字段顺序是控制台前端做了排序处理后的展示效果，和 SDK 实际返回的字段顺序没有关联，不要以此作为顺序依据。

你不需要替换getDocs()方法，所有方案都可以正常获取文档ID，根据你的业务场景选即可：

• 固定字段场景：前端硬编码展示顺序
  如果你要展示的字段是预先定义好的固定集合，直接在渲染层写死字段遍历顺序，完全不依赖返回对象的自带key顺序，实现成本最低，也是最推荐的做法：

  // 按你需要的展示顺序定义字段数组
  const DISPLAY_ORDER = ['field1', 'field2']
  const snapshot = await getDocs(collection(db, currentUser.uid))
  snapshot.forEach(doc => {
    const docId = doc.id // 你需要的文档ID可正常获取，不受影响
    const docData = doc.data()
    // 按照预设顺序遍历字段渲染
    DISPLAY_ORDER.forEach(fieldKey => {
      const value = docData[fieldKey]
      // 这里写你的字段渲染逻辑
    })
  })
  

• 半动态字段场景：文档内自带顺序配置
  如果字段会动态增减、但每个文档的字段顺序可以在写入时确定，就在每个文档里新增一个专门存储顺序的数组字段，比如fieldOrder: ['field1', 'field2']，拉取到数据后先读取这个数组，再按照数组内的顺序遍历字段即可。注意新增、删除、调整字段顺序时，要同步更新这个数组字段。
• 全动态字段场景：拆分字段为子集合存储
  如果连字段名都是用户自定义的、完全不固定，可以把原本平铺在文档里的字段拆成对应文档下的子集合，每个子集合文档存储单字段信息：{ fieldName: string, fieldValue: any, sort: number }，查询时对子集合按sort字段做排序查询，就能拿到稳定顺序的字段列表，主集合的文档ID也可以正常获取使用。

注意：不要尝试依赖JavaScript对象本身的key枚举顺序实现稳定排序，不同JS运行环境的枚举规则存在差异，本身就不适合作为业务层顺序判断的依据。

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