如何在Next.js电商项目Header组件展示Firebase Auth登录用户名

你可以通过React状态管理配合Firebase的认证状态监听实现需求，完整修改后的Header组件代码如下：

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

function Header() {
  // 声明状态存储用户信息，支持响应式更新
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 监听Firebase认证状态变化，用户登录/登出都会触发回调同步状态
    const unsubscribe = firebase.auth().onAuthStateChanged((currentUser) => {
      setUser(currentUser);
    });
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  // 你原有代码缺失该登录方法，自行补充对应登录逻辑即可
  const SigninWithFirebase = () => {
    // 你的Firebase登录逻辑
  };

  return (
    <div>
      <div className="flex items-center bg-amazon_blue p-1 flex-grow py-2">
        {/* 顶部导航 */}
        <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>

        {/* 搜索框 */}
        <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>
        {/* 右侧功能区 */}
        <div className="text-white flex items-center text-xs space-x-6 mx-6 whitespace-nowrap">
          <div onClick={SigninWithFirebase} className="signIn cursor-pointer links">
            {/* 三元判断用户登录状态，未登录展示默认提示 */}
            <p>hello {user?.displayName || '访客'}</p>
            <p className="font-extrabold md:text-sm">账户与列表</p>
          </div>

          <div className="cursor-pointer  links">
            <p>退换货</p>
            <p className="font-extrabold md:text-sm">我的订单</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">购物车</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" />
          全部分类
        </p>
        <p className="link">男装</p>
        <p className="link">女装</p>
        <p className="link">鞋履</p>
        <p className="link ">配饰</p>
        <p className="link hidden lg:inline-flex">新品</p>
        <p className="link hidden lg:inline-flex">新品</p>
        <p className="link hidden lg:inline-flex">新品</p>
      </div>
    </div>
  )
}

export default Header

核心修改说明 #

• 新增useState存储用户对象，保证用户登录状态变化时组件自动重新渲染
• 用onAuthStateChanged监听Firebase全局认证状态，无需手动拉取用户信息，组件加载时会自动同步当前登录状态
• 调整变量作用域，通过可选链操作符?.避免用户未登录时读取属性报错
• 移除冗余的重复获取用户代码，统一使用监听回调返回的用户对象

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