Next.js自定义Hook报错：useMenuState is not a function求助

1. 修正导入路径与文件匹配问题 #

你的自定义Hook文件名为usemenustat.tsx，但当前导入路径写的是./clientsidecomponents，这会导致React无法正确找到Hook函数：

• 如果usemenustat.tsx直接放在clientsidecomponents目录下，需要明确指定文件名导入：

  import { useMenuState } from "./clientsidecomponents/usemenustat";
  

• 若想通过./clientsidecomponents直接导入，需在该目录下创建index.tsx并导出Hook：

  // clientsidecomponents/index.tsx
  export { useMenuState } from "./usemenustat";
  

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

自定义Hook依赖React的useState，只能在客户端组件中运行。给nav.tsx添加"use client";指令（必须放在文件最顶部）：

"use client";

import Image from "next/image";
// 其他导入代码...

缺少该指令时，Navbar默认是服务端组件，不仅Hook无法执行，还可能引发导入解析异常。

3. 避免接口与Hook重名冲突 #

你定义的接口名也是useMenuState，虽然不会直接触发当前错误，但会造成类型混淆，建议重命名接口：

interface MenuState {
  menuOpen: boolean;
  handleNav: () => void;
}

验证修正后的完整代码 #

修正后的nav.tsx #

"use client";

import Image from "next/image";
import logo from "../../public/images/mainLogo.webp";
import Link from "next/link";
import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";
import { useMenuState } from "./clientsidecomponents/usemenustat";

interface MenuState {
  menuOpen: boolean;
  handleNav: () => void;
}

const Navbar = () => {
  const { menuOpen, handleNav } = useMenuState();

  return (
    <nav className="fixed w-full h-24 shadow-xl bg-white">
      <div className="flex justify-between items-center h-full w-full px-4  2xl:px-16">
        <Link href="/">
          <Image
            src={logo}
            alt="logo"
            width="100"
            height="100"
            className="cursor-pointer"
            priority
          />
        </Link>
        <div className="hidden sm:flex">
          <ul className="hidden sm:flex">
            <Link href="/about">
              <li className="ml-10 uppercase hover:border-b text-xl">Why Us</li>
            </Link>
            <Link href="/contact">
              <li className="ml-10 uppercase hover:border-b text-xl">
                Contact Us
              </li>
            </Link>
            <Link href="/Services">
              <li className="ml-10 uppercase hover:border-b text-xl">
                Our Services
              </li>
            </Link>
          </ul>
        </div>
        <div onClick={handleNav} className="sm:hidden cursor-pointer pl-24">
          <AiOutlineMenu size={25} />
        </div>
      </div>
      <div
        className={
          menuOpen
            ? "fixed left-0 top-0 w-[65%] sm:hidden h-screen bg-[#ecf0f3] p-10 ease-in duration-500"
            : "fixed left-[-100%] top-0 p-10 ease-in duration-500"
        }
      >
        <div className="flex w-full items-center justify-end">
          <div onClick={handleNav} className="sm:hidden cursor-pointer pl-24">
            <AiOutlineClose size={25} />
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

usemenustat.tsx保持不变 #

"use client";

import { useState } from "react";

export function useMenuState() {
  const [menuOpen, setMenuOpen] = useState(false);

  const handleNav = () => {
    setMenuOpen(!menuOpen);
  };

  return { menuOpen, handleNav };
}

内容的提问来源于stack exchange，提问作者Musab Mubaraq MBURAIMOH