如何将Firestore查询获取的数据转换为JSON对象用于后续数据筛选？

解决方案 #

doc.data() 本身返回的就是标准纯JavaScript对象，完全可以直接用来做筛选、遍历等操作，不需要额外转换。如果你需要序列化后的JSON字符串用于存储、传参等场景，直接调用JSON.stringify()处理即可。

你可以参考如下修改后的代码，把获取到的数据存入state方便后续操作：

import { useState, useEffect } from 'react';

const App = () => {
  // 初始化空数组存储多条查询结果
  const [users, setUsers] = useState([]);

  const getData = async () => {
    const citiesRef = firestore.collection("users");
    const snapshot = await citiesRef
      .where("item.itemName", "==", true)
      .where("item", "==", false)
      .get();
    if (snapshot.empty) {
      console.log("No matching documents.");
      return;
    }

    // 把所有文档数据整理为带文档id的数组，存入state
    const userList = snapshot.docs.map(doc => {
      // 附带文档id方便后续更新、删除等操作
      return { id: doc.id, ...doc.data() }
    });
    setUsers(userList);
    
    // 如需JSON字符串，直接序列化即可
    const userJsonStr = JSON.stringify(userList);
    console.log('序列化后的JSON字符串：', userJsonStr);
    // 后续需要转回对象的话调用 JSON.parse(userJsonStr) 即可
  };

  useEffect(() => {
    getData();
  }, []); // 增加空依赖数组，避免重复触发请求

  // 示例：直接使用users数组做筛选操作，无需转JSON
  const filteredUsers = users.filter(user => user.age > 20);

  return <div>Month</div>;
};

export default App;

补充说明 #

如果只是要在代码里做筛选、计算等逻辑，不需要转JSON字符串，直接操作doc.data()返回的JS对象或者处理后的users数组即可，转JSON字符串一般仅用于本地存储、后端传参等需要序列化的场景。

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