如何基于Firestore直接实现Ant Design表格的用户类型筛选？

不用自定义筛选下拉框，直接利用Table的onChange事件捕获筛选状态变化，触发Firestore查询更新数据源即可，具体实现如下：

1. 维护筛选与数据源状态 #

在组件内声明状态变量，分别记录当前选中的筛选值和Table的数据源：

const [userTypeFilter, setUserTypeFilter] = useState(null);
const [tableData, setTableData] = useState([]);

2. 绑定Table的onChange事件处理筛选逻辑 #

通过onChange事件直接获取筛选参数，更新筛选状态后发起Firestore查询：

const handleTableChange = async (pagination, filters) => {
  // 提取userType列的选中筛选值
  const selectedType = filters.userType?.[0] || null;
  setUserTypeFilter(selectedType);

  // 构建Firestore查询
  let userQuery = db.collection('users');
  if (selectedType) {
    userQuery = userQuery.where('userType', '==', selectedType);
  }
  
  // 执行查询并更新数据源
  const querySnapshot = await userQuery.get();
  const fetchedData = querySnapshot.docs.map(doc => ({
    ...doc.data(),
    key: doc.id // 给每条数据添加key，符合AntD Table要求
  }));
  setTableData(fetchedData);
};

3. 配置列参数（保留默认筛选样式） #

移除本地筛选用的onFilter，将filteredValue绑定到我们维护的筛选状态，同时修正原代码的拼写错误：

// 定义常量避免硬编码
const TeachType = 'TeachType';
const StudType = 'StudType';

const columns = [
  {
    title: 'User ID',
    dataIndex: 'userId',
    key: 'userId',
    render: (_, record) => <div>{record.userId}</div>,
  },
  { 
    title: 'User Type',
    dataIndex: 'userType',
    key: 'userType',
    render: (text) => 
      text === TeachType ? 'Teacher' : 'Student', // 修正原代码的"Techer"拼写错误
    filters: [
      { text: 'Teacher', value: TeachType },
      { text: 'Student', value: StudType },
    ],
    filteredValue: userTypeFilter ? [userTypeFilter] : null, // 绑定筛选状态，同步选中样式
  },
];

4. 渲染Table组件 #

将数据源和事件处理函数绑定到Table：

<Table
  columns={columns}
  dataSource={tableData}
  onChange={handleTableChange}
/>

关键说明 #

• 不用onFilterDropdownVisibleChange的原因：该事件仅监听下拉框的显示/隐藏状态，无法直接获取选中的筛选值；而onChange是Table专门处理分页、筛选、排序变化的原生事件，能直接拿到完整的筛选参数，完全满足需求。
• 全程保留AntD默认的筛选下拉框样式，无需自定义任何UI组件，只需要处理状态和远程查询逻辑。
• 当筛选值为null（用户取消筛选选择“全部”）时，Firestore会返回所有用户数据。

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