mui-datatables如何传入Firestore文本到可展开行并获取文档ID给setState

问题原因分析 #

1. 表格无数据：mui-datatable 当传入的data为对象数组时，columns不能用简单字符串数组，需要配置每个列的name属性和数据对象的key一一对应才能匹配渲染。
2. 展开行拿不到text字段：renderExpandableRow回调的rowMeta参数携带当前行的索引，可直接通过索引从blogs数组中取到对应完整数据。
3. 缺少文档ID：遍历Firestore快照时没有把doc.id存入数组，导致后续无法拿到文档ID。

修改后的完整实现 #

import MUIDataTable from "mui-datatables";
import { useState, useEffect } from "react";

// 列配置必须和数据对象的key对应
const columns = [
  {
    name: "Title",
    label: "标题"
  },
  {
    name: "Created Date",
    label: "创建时间"
  }
];

const BlogTable = () => {
  const [blogs, setBlogs] = useState([]);
  const [selectedDocId, setSelectedDocId] = useState(""); // 存储选中的文档ID
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = firestore
      .collection("blogs")
      .onSnapshot((snapshot) => {
        const arr = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          arr.push({
            id: doc.id, // 存入文档ID
            text: parse(data.text),
            Title: data.title,
            "Created Date": new Date(
              data.createdDate.seconds * 1000
            ).toDateString(),
          });
        });
        setBlogs(arr);
        setIsLoading(false); // 数据加载完成关闭加载状态
      });

    return () => {
      unsubscribe();
    };
  }, []);

  const options = {
    filter: true,
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      // rowMeta.dataIndex 对应原始blogs数组的索引，直接取对应数据
      const currentRow = blogs[rowMeta.dataIndex];
      // 将文档ID存入state
      setSelectedDocId(currentRow.id);
      // 返回展开行的渲染内容
      return (
        <tr>
          <td colSpan={columns.length + 1} style={{ padding: "16px" }}>
            {/* 如果text是纯文本直接写 {currentRow.text} 即可 */}
            <div dangerouslySetInnerHTML={{ __html: currentRow.text }} />
          </td>
        </tr>
      );
    },
  };

  if (isLoading) return <div>加载中...</div>;

  return (
    <MUIDataTable
      title={"博客列表"}
      columns={columns}
      data={blogs}
      options={options}
    />
  );
};

关键实现说明 #

• 列配置调整：将columns改为对象数组，name属性和你存入数组的字段名完全一致，才能让表格正确匹配数据渲染。
• 文档ID存储：遍历Firestore快照时把doc.id存入每一项数据，后续需要操作对应文档时直接取id字段即可。
• 展开行渲染：通过rowMeta.dataIndex拿到当前行在原始blogs数组中的索引，就能获取到完整的行数据，包括不展示在表格列中的text和id字段。
• 加载状态修正：拿到数据后要将isLoading设为false，避免加载状态遮挡表格导致看不到数据。

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