Next.js中Navbar调用setShowCart触发事件处理函数传递错误求助

错误信息 #

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.

^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

你的原始代码 #

Navbar.jsx #

import React from 'react'
import Link from 'next/link';
import {AiOutlineShopping} from 'react-icons/ai';
import { Cart } from '.';


const Navbar = ({ showCart, setShowCart }) => {
  return (
    <div className='navbar-container'> 
    <p className='logo'>
      <Link href="/">JSM headphones</Link>

    </p>
    <button type="button" className="cart-icon" onClick={() => setShowCart(true)}>
      <AiOutlineShopping/>
      <span className='cart-item-qty'>1</span>
    </button>
    {showCart && <Cart />}
    </div>
  )
}

export default Navbar;

Layout.jsx #

import React from 'react'
import Head from 'next/head';
import Navbar from './Navbar';
import Footer from './Footer';


const Layout = ({children}) => {
  return (
    <div className='layout'>
      <Head>
        <title>E-commerce  Store</title>
        </Head>
        <header>
          <Navbar/>
        </header>
        <main className='main-container'>
        {children}
        </main>
        <footer>
          <Footer/>
        </footer>

 
    </div>
  )
}

export default Layout

解决方案 #

问题核心是Next.js App Router默认组件为Server Component，这类组件不支持交互逻辑（比如事件处理器、useState等），也不能接收来自父组件的事件处理函数。要修复这个问题，需要：

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

在Navbar.jsx最顶部添加'use client'指令，告诉Next.js这个组件需要在客户端运行，支持交互：

'use client' // 必须添加这行
import React, { useState } from 'react'
import Link from 'next/link';
import {AiOutlineShopping} from 'react-icons/ai';
import { Cart } from '.';

2. 在Navbar内部管理交互状态 #

将showCart的状态移到Navbar组件内部，避免从Server Component（Layout）传递状态更新函数：

const Navbar = () => {
  // 内部管理购物车显示状态
  const [showCart, setShowCart] = useState(false);
  
  return (
    <div className='navbar-container'> 
    <p className='logo'>
      <Link href="/">JSM headphones</Link>
    </p>
    <button type="button" className="cart-icon" onClick={() => setShowCart(true)}>
      <AiOutlineShopping/>
      <span className='cart-item-qty'>1</span>
    </button>
    {showCart && <Cart />}
    </div>
  )
}

3. 检查Cart组件（如果有交互） #

如果Cart组件也包含交互逻辑（比如关闭按钮），同样需要在其文件顶部添加'use client'指令。

补充说明 #

• Server Component用于无交互的静态内容渲染，能减少客户端JS体积、提升性能；
• 任何需要处理用户交互（点击、输入等）的组件，都必须添加'use client'声明；
• Layout组件保持默认的Server Component即可，无需修改。

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