Next.js运行时错误：useLoadMore函数无法调用问题求助

数据老陈

2026-6-17

问题分析与解决方法

1. 服务器组件调用客户端Hook（核心原因）

app目录下的Home组件默认是服务器组件，而useLoadMore是带有"use client"标记的客户端Hook，服务器组件无法直接调用客户端Hook。

解决：给Home组件添加"use client"指令，放在文件最顶部：

"use client"
// 后续import语句
import { useLoadMore } from '../components/LoadMore';

export default function Home() {
  // 原有代码保持不变
}

2. 导入路径错误

核对文件结构：

如果LoadMore.tsx在项目根目录的components/文件夹下，而main.tsx在app/文件夹内，正确的导入路径应为../components/LoadMore（而非../app/components/LoadMore，除非你的components文件夹嵌套在app目录里）。

修正导入语句示例：

// 假设文件结构：
// project/
// ├─ app/
// │  └─ main.tsx
// └─ components/
//    └─ LoadMore.tsx

import { useLoadMore } from '../components/LoadMore';

3. 文件扩展名问题

确保LoadMore的文件扩展名是.tsx（而非.ts），Next.js对React组件文件类型有严格区分，.ts文件无法正确识别React Hook代码。

4. 导出/导入匹配检查

确认LoadMore.tsx的命名导出无误：
你的代码已使用export function useLoadMore()进行命名导出，导入时的import { useLoadMore } from ...写法是正确的，不要误改为默认导出（比如export default useLoadMore）。