如何在react中过滤客户端的firestore数据

import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

const FilteredDataComponent = () => {
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    // 连接到Firestore数据库
    const firestore = firebase.firestore();

    // 过滤条件
    const filterCondition = firestore.collection('your_collection')
      .where('your_field', '==', 'your_value');

    // 获取过滤后的数据
    filterCondition.get().then((querySnapshot) => {
      const filteredData = [];
      querySnapshot.forEach((doc) => {
        filteredData.push(doc.data());
      });
      setFilteredData(filteredData);
    });
  }, []);

  return (
    <div>
      {/* 渲染过滤后的数据 */}
      {filteredData.map((data) => (
        <div key={data.id}>{data.name}</div>
      ))}
    </div>
  );
};

export default FilteredDataComponent;