Next.js中MUI X Data Grid列定义报错及异步渲染问题求助

问题分析 #

你的问题核心是Next.js的Server/Client组件边界限制：服务器组件里不能直接传递客户端执行的函数，而valueGetter是Data Grid在客户端渲染时执行的同步逻辑，完全没必要标记为use server。改成异步函数后，Data Grid无法自动解析Promise，所以会显示[object Promise]。

解决方案 #

方案1：将列定义移至客户端组件 #

如果你的Data Grid所在组件是服务器组件，把列定义单独放在标记了'use client'的文件中，或者在Data Grid组件顶部添加'use client'指令，直接使用同步的valueGetter即可：

'use client';

import { DataGrid } from '@mui/x-data-grid';

const columns = [
  {
    field: 'home_address',
    valueGetter: (_, row) => row.user?.home_address, // 建议添加空值保护避免报错
    headerName: 'Address' 
  },
  // 其他列定义
];

export default function MyDataGrid({ rows }) {
  return <DataGrid rows={rows} columns={columns} />;
}

方案2：预取异步数据（需服务端获取地址时用） #

如果home_address需要通过异步请求获取，不要在valueGetter里做异步操作，而是提前在组件层面批量获取所有需要的数据，再传递给Data Grid：

'use client';

import { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

export default function MyDataGrid({ initialRows }) {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    const fetchAddresses = async () => {
      // 批量获取所有行对应的地址数据
      const enrichedRows = await Promise.all(
        initialRows.map(async (row) => {
          const address = await fetchAddress(row.user.id); // 替换为你的异步请求函数
          return { ...row, user: { ...row.user, home_address: address } };
        })
      );
      setRows(enrichedRows);
    };

    fetchAddresses();
  }, [initialRows]);

  const columns = [
    {
      field: 'home_address',
      valueGetter: (_, row) => row.user?.home_address,
      headerName: 'Address' 
    },
    // 其他列定义
  ];

  return <DataGrid rows={rows} columns={columns} />;
}

方案3：用renderCell处理异步渲染（不推荐，性能差） #

如果必须在单元格层面异步获取数据，可以用renderCell配合状态管理，但频繁的异步请求会影响性能，仅适合少量数据场景：

'use client';

import { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  {
    field: 'home_address',
    renderCell: ({ row }) => {
      const [address, setAddress] = useState('Loading...');

      useEffect(() => {
        const getAddress = async () => {
          const res = await fetchAddress(row.user.id);
          setAddress(res);
        };
        getAddress();
      }, [row.user.id]);

      return address;
    },
    headerName: 'Address' 
  },
  // 其他列定义
];

关键注意点 #

• valueGetter是同步函数，仅用于从已有的行数据中提取值，不能处理异步逻辑。
• Next.js的'use server'标记是给服务器端执行的函数用的，客户端渲染逻辑不需要加这个标记。
• 批量预取数据是处理Data Grid异步数据的最优方式，避免单元格级别的重复请求。

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