Next.js项目出现Element type is invalid报错求助

你遇到的Element type is invalid报错是React渲染时找不到对应组件导致的，结合你的代码，共有5个需要修复的点，其中第一个是直接触发报错的核心原因，剩下的是功能逻辑bug：

• 导入路径大小写不匹配：你导入NavbarLink时写的路径是./NavLink，导入Logo时写的是./logo，如果实际文件名和路径大小写不一致（比如组件文件实际叫NavbarLink.tsx/Logo.tsx），在大小写敏感的运行环境（Linux、线上部署环境）中，导入的组件变量会是undefined，渲染时直接抛出该错误。Windows/macOS本地开发默认大小写不敏感，很容易忽略这个问题。
• NavbarLink组件未接收、绑定点击事件：组件解构props时只提取了children/url/isActive三个属性，传入的clickHandler被直接丢弃，也没有绑定到任何可点击元素上，点击不会触发登出逻辑。
• 点击事件传参错误：你写的clickHandler={() => logout}只会返回logout函数引用，不会实际执行登出方法。
• useLogout状态逻辑缺失：signOut执行完成（无论成功/失败）后，没有将isPending重置为false，会导致加载状态永久卡住。
• 路由逻辑不匹配：NavbarLink的url属性传的是"/"，但激活判断写的是router.route === "/logout"，点击跳转和激活状态不对应。

1. 修复useLogout Hook #

import { signOut } from "firebase/auth";
import { useState } from "react";
import { projectAuth } from "../firebase/config";

export const useLogout = () => {
  const [error, setError] = useState<string>("");
  const [isPending, setIsPending] = useState(false);

  const logout = async () => {
    setError("");
    setIsPending(true);
    try {
      await signOut(projectAuth);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setIsPending(false);
    }
  };

  return { isPending, error, logout };
};

2. 修复NavbarLink组件 #

正确接收clickHandler属性并绑定到点击事件上：

import Link from "next/link";
import { FC, ReactNode } from "react";
import classes from "./NavLink.module.scss";

interface NavbarLinkProps {
  children: ReactNode;
  url: string;
  isActive: boolean;
  clickHandler?: () => void;
}

const NavbarLink: FC<NavbarLinkProps> = (props) => {
  // 完整解构所有传入属性
  const { children, url, isActive, clickHandler } = props;
  return (
    <li 
      className={`${classes.item} ${isActive ? classes.active : ""}`}
      onClick={clickHandler}
    >
      <Link href={url}>
        <a>{children}</a>
      </Link>
    </li>
  );
};
export default NavbarLink;

如果你使用Next.js 13+ App Router，移除<Link>内部包裹的<a>标签，直接将内容作为Link的子元素即可，新版本不需要额外嵌套a标签。

3. 修复MainNavigation组件 #

核对所有组件导入的文件名大小写，修正属性传值：

import Link from "next/link";
import { useRouter } from "next/router";
import { useLogout } from "../../hooks/useLogout";
// 删掉未使用的Button导入，避免不必要的构建错误
import Logo from "./Logo"; // 核对文件名大小写，不要把Logo写成小写logo
import classes from "./main-navigation.module.scss";
import NavbarLink from "./NavbarLink"; // 核对文件名，和实际组件文件名保持一致

const MainNavigation = () => {
  const router = useRouter();
  const { logout } = useLogout();

  return (
    <header className={classes.header}>
      <Link href="/">
        <a>
          <Logo />
        </a>
      </Link>
      <nav>
        <ul>
          <NavbarLink
            url="/logout"
            isActive={router.route === "/logout"}
            // 直接传入logout函数即可，不需要额外包箭头函数返回引用
            clickHandler={logout}
          >
            Logout
          </NavbarLink>
        </ul>
      </nav>
    </header>
  );
};

export default MainNavigation;

如果修改后仍然报错，按顺序检查：

• 所有自定义组件（Logo、NavbarLink）是否使用默认导出，导入时不要错误添加花括号写成命名导入
• 样式文件的导入路径是否正确，不存在的样式文件导入也可能导致组件编译为undefined
• 确认firebase的配置文件正确导出了projectAuth实例，避免Hook内部运行错误

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