Next.js 13向子组件传递Props遇类型错误，求合规解决方案

你的问题核心原因是Next.js 13 App Router的组件默认规则：app目录下的组件默认是Server Component，这类组件的props只能传递可序列化的数据（比如字符串、数字），而useState返回的更新函数属于非序列化值，传递给Server Component子组件时会触发类型校验失败——开发环境可能因热重载忽略部分校验，但build阶段会严格检查。把组件移到components目录解决问题，本质是因为该目录下的组件若被Client Component引用，会自动被识别为Client Component（或你手动加了'use client'指令），Client Component可以接收非序列化的状态和方法。

除了移动组件目录，还有以下几种类型安全的实现方式：

1. 显式标记子组件为Client Component（无需移动目录） #

在子组件顶部添加'use client'指令，将其声明为Client Component，即可合法接收useState的状态值和更新方法，同时做好类型定义：

'use client';

import type { Dispatch, SetStateAction } from 'react';

// 定义Props类型，确保类型安全
interface ChildProps {
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
}

export default function ChildComponent(props: ChildProps) {
  return (
    <button onClick={() => props.setCount(prev => prev + 1)}>
      点击计数：{props.count}
    </button>
  );
}

注意：如果父组件也使用了useState，同样需要在父组件顶部添加'use client'指令，因为useState是Client Component专属API。

2. 使用Context API共享状态 #

当多个组件需要共享同一状态时，用Context API避免逐层传递props，同时保证类型安全：

第一步：创建Context和Provider #

// app/context/CountContext.tsx
'use client';

import { createContext, useContext, useState, ReactNode, Dispatch, SetStateAction } from 'react';

// 定义Context类型
interface CountContextType {
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
}

const CountContext = createContext<CountContextType | undefined>(undefined);

// 封装Provider组件
export function CountProvider({ children }: { children: ReactNode }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

// 封装自定义Hook，简化Context调用
export function useCount() {
  const context = useContext(CountContext);
  if (!context) throw new Error('useCount必须在CountProvider范围内使用');
  return context;
}

第二步：在根布局中注入Provider #

// app/layout.tsx
import { CountProvider } from './context/CountContext';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <CountProvider>{children}</CountProvider>
      </body>
    </html>
  );
}

第三步：子组件中使用状态 #

'use client';

import { useCount } from '../context/CountContext';

export default function ChildComponent() {
  const { count, setCount } = useCount();
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      当前计数：{count}
    </button>
  );
}

3. 使用轻量状态管理库（如Zustand/Jotai） #

对于复杂状态场景，用轻量状态库替代Context，减少嵌套且类型友好，以Zustand为例：

第一步：创建状态Store #

// app/store/countStore.ts
'use client';

import { create } from 'zustand';

// 定义Store类型
interface CountStore {
  count: number;
  increment: () => void;
}

// 创建状态Store
export const useCountStore = create<CountStore>((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

第二步：子组件中使用状态 #

'use client';

import { useCountStore } from '../store/countStore';

export default function ChildComponent() {
  const count = useCountStore(state => state.count);
  const increment = useCountStore(state => state.increment);
  
  return (
    <button onClick={increment}>
      当前计数：{count}
    </button>
  );
}

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