Next.js14中MUI X-Date-Picker报错：无法传递AdapterDayjs函数

错误原因 #

在Next.js 14的App Router中，RootLayout默认是服务器组件，而LocalizationProvider属于客户端组件。直接将AdapterDayjs（函数类型）作为dateAdapter props传递给客户端组件时，会触发Next.js的安全限制——服务器组件无法直接向客户端组件传递函数，除非标记为"use server"（但此场景不适用）。

解决方案 #

方案1：封装独立的客户端LocalizationProvider组件 #

创建一个单独的客户端组件来包裹LocalizationProvider，避免在服务器组件中直接传递函数props：

1. 创建components/LocalizationClientProvider.tsx文件：

'use client';

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export default function LocalizationClientProvider({ children }: { children: React.ReactNode }) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      {children}
    </LocalizationProvider>
  );
}

2. 修改RootLayout，使用这个封装好的客户端组件替代原LocalizationProvider：

import DashLayout from '@/components/dashLayout'
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
import LocalizationClientProvider from '@/components/LocalizationClientProvider'

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <head></head>
      <body>
        <AppRouterCacheProvider>
          <LocalizationClientProvider>
            <DashLayout>{children}</DashLayout>
          </LocalizationClientProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  )
}

方案2：将RootLayout转为客户端组件 #

如果你的RootLayout不需要保留服务器组件的特性，可以直接在顶部添加'use client'指令，将整个布局转为客户端组件，这样就能直接传递函数props：

'use client';

import DashLayout from '@/components/dashLayout'
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'

import { LocalizationProvider } from '@mui/x-date-pickers'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <head></head>
      <body>
        <AppRouterCacheProvider>
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DashLayout>{children}</DashLayout>
          </LocalizationProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  )
}

原理说明 #

Next.js App Router的服务器组件与客户端组件之间存在数据传递限制，函数类型无法直接跨边界传递。通过上述两种方式，将AdapterDayjs的传递逻辑限制在客户端组件内部，即可规避这个报错，让X-Date-Picker正常工作。

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