React Hot Toast报错：无法直接向客户端组件传递函数

问题原因 #

Next.js App Router中，默认的RootLayout是服务器组件，而你编写的CustomToaster包含客户端交互逻辑（点击事件、React Hot Toast的客户端API），服务器组件无法直接传递函数给未标记的组件，因此触发错误。

修复步骤 #

1. 标记CustomToaster为客户端组件 #

在CustomToaster组件的最顶部添加'use client'指令，明确该组件运行在客户端环境，从而允许使用客户端API和交互逻辑。

2. 确保正确导入依赖 #

确保在CustomToaster中正确导入React Hot Toast的相关模块（toast、Toaster、ToastBar、Toast类型）。

修改后的完整代码 #

'use client'; // 必须添加这一行，标记为客户端组件
import { Toaster, ToastBar, Toast, toast } from 'react-hot-toast';

function CustomToaster() {
  return (
    <Toaster position="top-center">
      {(t: Toast) => (
        <ToastBar toast={t}>
          {({ icon, message }) => (
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                {icon}
                {message}
              </div>
              {t.type !== 'loading' && (
                <button 
                  onClick={() => toast.remove(t.id)}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px' }}
                >
                  X
                </button>
              )}
            </div>
          )}
        </ToastBar>
      )}
    </Toaster>
  );
}

export default CustomToaster;

RootLayout无需修改，保持原代码即可，因为它作为服务器组件可以正常引入标记为'use client'的客户端组件。

关键说明 #

• 'use client'是Next.js App Router中区分客户端/服务器组件的核心指令，所有包含交互逻辑、浏览器API、客户端库的组件都需要添加该指令。
• React Hot Toast的toast对象是客户端专属API，只能在客户端组件中使用，标记为'use client'后才能正常访问调用。

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