Firebase登录后获取用户信息并在Next.js头部显示时遇TypeError错误的解决方法

阿华AIGC实验室

2026-5-1

问题根源

你遇到的TypeError: getAuth is not a function是因为Firebase版本不兼容：你package.json里安装的是Firebase v8.10.0，但getAuth()是Firebase v9+才引入的模块化API语法，v8依然使用传统的命名空间式调用（比如你登录函数里的firebase.auth()），两种语法混用就会报错。

修复步骤&代码调整

1. 替换错误的Auth实例获取方式

删掉v9风格的import { getAuth } from "firebase/auth";，改用v8的方式获取auth实例：

// 删掉这行废弃代码
// import { getAuth } from "firebase/auth";

// 直接用你已导入的firebase实例获取auth
const auth = firebase.auth();

2. 监听用户登录状态（关键！）

直接读取auth.currentUser可能会因为Firebase还未完成初始化而返回null，所以我们需要用onAuthStateChanged实时监听用户状态变化，结合React的useState和useEffect来更新组件：

在Header组件里添加状态和监听逻辑：

import { useState, useEffect } from 'react'; // 新增导入

function Header() {
  const [user, setUser] = useState(null); // 新增用户状态

  // 监听用户登录/登出状态，组件挂载时启动监听
  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((currentUser) => {
      setUser(currentUser); // 状态更新，触发组件重渲染
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  // 保留你的SigninWithFirebase函数...

3. 在头部渲染用户名称

找到原来显示"hello"的地方，替换为用户的displayName（如果用户已登录）：

<div onClick={!user ? SigninWithFirebase : undefined} className="signIn cursor-pointer links">
  <p>Hello, {user ? user.displayName : 'Guest'}</p>
  <p className="font-extrabold md:text-sm">
    {user ? 'Account & Sign Out' : 'Account & Sign In'}
  </p>
</div>

4. 可选：添加登出功能

如果需要支持登出，新增一个登出函数：

const SignOutWithFirebase = () => {
  firebase.auth().signOut()
    .then(() => console.log('用户已登出'))
    .catch(err => console.error('登出错误:', err));
};

然后在用户登录状态下，把点击事件换成这个函数：

<div onClick={!user ? SigninWithFirebase : SignOutWithFirebase} className="signIn cursor-pointer links">

import Image from "next/image";
import 'tailwindcss/tailwind.css'
import firebase from "../Firebase/Firebase";
import { useState, useEffect } from 'react';
import { MenuIcon, SearchIcon, ShoppingCartIcon } from "@heroicons/react/outline";

function Header() {
  const [user, setUser] = useState(null);

  // 监听用户状态变化
  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  const SigninWithFirebase = () => {
    let google_provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().signInWithPopup(google_provider).then((re) => {
      console.log(re);
    })
    .catch((err) => {
      console.log(err);
    })
  }

  const SignOutWithFirebase = () => {
    firebase.auth().signOut()
      .then(() => console.log('登出成功'))
      .catch(err => console.error('登出失败:', err));
  };

  return (
    <div>
      <div className="flex items-center bg-amazon_blue p-1 flex-grow py-2">
        {/* top nav */}
        <div className=" mt-2 flex items-center flex-grow sm:flex-grow-0">
          <Image src="https://links.papareact.com/f90" width={150} height={40} objectFit="contain" className="cursor-pointer" />
        </div>
        {/* bottom nav */}
        {/* Search bar */}
        <div className="hidden sm:flex items-center h-10 cursor-pointer flex-grow rounded-md bg-yellow-400 hover:bg-yellow-500">
          <input className="p-2 h-full w-6 flex-grow flex-shrink rounded-l-md focus:outline-none px-4 " type="text" />
          <SearchIcon className="h-12 p-4" />
        </div>
        {/* Right */}
        <div className="text-white flex items-center text-xs space-x-6 mx-6 whitespace-nowrap">
          <div 
            onClick={!user ? SigninWithFirebase : SignOutWithFirebase} 
            className="signIn cursor-pointer links"
          >
            <p>Hello, {user ? user.displayName : 'Guest'}</p>
            <p className="font-extrabold md:text-sm">
              {user ? 'Account & Sign Out' : 'Account & Sign In'}
            </p>
          </div>
          <div className="cursor-pointer links">
            <p>Returns</p>
            <p className="font-extrabold md:text-sm">& Orders</p>
          </div>
          <div className="cursor-pointer relative links flex items-center">
            <span className="absolute top-0 right-0 md:right-10 h-4 w-4 bg-yellow-400 text-center rounded-full text-black font-bold">
              0
            </span>
            <ShoppingCartIcon className="h-10" />
            <p className="hidden md:inline font-extrabold md:text-sm mt-2">Basket</p>
          </div>
        </div>
      </div>
      <div className="space-between flex items-center space-x-3 p-2 pl-6 bg-amazon_blue-light text-white text-sm ">
        <p className="link flex items-center">
          <MenuIcon className="h-6 mr-1" />
          All
        </p>
        <p className="link">Men</p>
        <p className="link">Women</p>
        <p className="link">Shoes</p>
        <p className="link ">Accessories </p>
        <p className="link hidden lg:inline-flex">Latest</p>
        <p className="link hidden lg:inline-flex">Latest</p>
        <p className="link hidden lg:inline-flex">Latest</p>
      </div>
    </div>
  )
}

export default Header