Next.js 15 App Router中useState读取null属性错误求助

问题根源 #

Next.js生产构建时对"use client"指令的识别逻辑比开发环境（next dev）严格得多：指令必须是组件文件的第一行有效代码，任何前置的空行、注释、导入语句都会导致指令被忽略，组件被默认当作服务端组件处理。而服务端环境中React客户端钩子（如useState）无法运行，因此抛出Cannot read properties of null (reading 'useState')错误。

修复步骤 #

1. 严格校验"use client"指令位置 #

打开ClientComponent.tsx，确保"use client";是文件的第一行，没有任何前置内容：

"use client";

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

注意：不能有前置的空行、注释或导入语句，否则Next.js生产构建会忽略该指令。

2. 清理构建缓存 #

旧的构建缓存可能残留错误的组件标识，执行以下命令清理：

rm -rf .next node_modules/.cache
npm install

3. 重新构建并验证 #

执行生产构建和启动命令：

next build && next start

访问页面后确认错误消失。

4. 检查导入链路 #

确保页面组件（app/items/[id]/page.tsx）直接导入ClientComponent，没有通过未标记"use client"的中间组件中转。如果有中间组件需要包裹客户端组件，中间组件也需要添加"use client"指令（建议尽量减少不必要的客户端组件层级）。

5. 排查Next.js配置问题 #

检查next.config.js，确保没有配置干扰客户端组件识别的选项，比如experimental.serverComponentsExternalPackages是否错误包含了React或相关依赖。

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