Next.js中useScreenSize Hook报错：不是函数的问题求助

核心原因分析 #

报错_hooks_useScreenSize__WEBPACK_IMPORTED_MODULE_4__.default is not a function本质是导入的useScreenSize并非预期的函数类型，常见触发场景包括导入路径错误、导出/导入语法不匹配、Next.js客户端组件标识未正确生效。

逐一排查解决步骤 #

1. 校验导入路径准确性 #

检查Navigation组件中useScreenSize的导入路径：

// Navigation组件中的导入语句
import useScreenSize from '../hooks/useScreenSize';

确认项目目录结构匹配该相对路径：

• 若Navigation组件在app/components/Navigation.js，则../hooks/useScreenSize对应app/hooks/useScreenSize.js
• 路径错误会导致导入空模块或非预期模块，直接触发类型错误

2. 统一导出与导入语法 #

你的Hook使用export default useScreenSize，导入时用import useScreenSize from '...'是正确的，但需注意：

• 检查useScreenSize.js是否存在重复导出（比如同时写了export default和export const useScreenSize）
• 确保文件无语法错误（如括号不闭合、变量未定义），语法错误会导致模块导出异常

3. 确保客户端组件标识生效 #

Next.js 13+ App Router中，依赖浏览器API（如window）的自定义Hook必须在Hook文件最顶部添加"use client"，你的Hook已添加，但可做额外验证：

• 确认"use client"是文件第一行，不能有任何代码/注释在它前面：

  // 正确写法：首行就是客户端标识
  "use client";
  import { useEffect, useState } from "react";
  

• 在使用Hook的Navigation组件顶部也添加"use client"：

  // Navigation.js顶部添加
  "use client";
  import { BtnList } from '@/app/data'
  import React from 'react'
  import NavButton from './NavButton';
  import useScreenSize from '../hooks/useScreenSize';
  

  App Router默认组件是服务器组件，直接在服务器组件中导入客户端Hook会触发异常。

4. 优化Hook初始化逻辑（可选） #

你的Hook中useState()未设置初始值，首次渲染时screenSize会是undefined，虽不直接导致当前报错，但可优化避免后续问题：

// 给useState添加初始值，兼容服务端渲染场景
const [screenSize, setScreenSize] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);

5. 清理缓存重启服务 #

Next.js缓存可能导致模块导出异常，执行以下操作：

• 停止开发服务器
• 删除项目根目录下的.next文件夹
• 重新启动服务器：npm run dev或yarn dev

验证方案 #

按上述步骤调整后，重新运行项目，若console.log(size)能正常输出窗口宽度，则问题解决。

内容的提问来源于stack exchange，提问作者D.Hodges