Firebase认证报错TypeError: 无法读取undefined的'onAuthStateChanged'属性

问题 #

跟着YouTube最新Firebase认证教程操作，运行代码后触发错误：TypeError: Cannot read properties of undefined (reading 'onAuthStateChanged')，排查后确认getAuth导入方式无误，但问题仍存在。

错误根源 #

1. auth实例导入错误：
   报错代码里的auth导入路径完全错误：

   import { auth } from "firebase/auth";
   

   firebase/auth包本身并不导出名为auth的实例，你需要导入的是自己在Firebase初始化文件中创建并导出的auth实例，当前导入导致auth变量为undefined，调用onAuthStateChanged时自然报错。

2. 环境变量拼写错误：
   Firebase初始化代码里的apiKey: process.env.NEXT_PUBLIC_API-KEY存在语法问题，变量名中的横杠会被JS解析为减法运算，导致apiKey读取失败，进而引发Firebase初始化失败，这也是auth实例未正确创建的隐性原因。

修复步骤 #

1. 修正auth导入路径
   将报错代码中的import { auth } from "firebase/auth";替换为从你的Firebase初始化文件导入，比如初始化文件名为firebase.config.js，路径根据项目结构调整：

   import { auth } from "../firebase.config"; // 替换为实际文件路径
   

2. 修正环境变量名
   在Firebase初始化代码中，把apiKey的变量名改为标准下划线格式：

   apiKey: process.env.NEXT_PUBLIC_API_KEY,
   

3. 优化AuthContext逻辑（可选但推荐）

   • 把useState初始值从'client'改为null，更符合用户未登录的初始状态
   • 去掉useEffect的user依赖项，避免无限重渲染，清理函数可以直接返回订阅函数

修复后的完整代码 #

AuthContext代码 #

import { useContext, createContext, useEffect, useState } from "react";
import { signInWithPopup, signOut, onAuthStateChanged, GoogleAuthProvider } from "firebase/auth";
// 替换为你的Firebase初始化文件路径
import { auth } from "../firebase.config";

const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider);
  };

  const logOut = () => {
    signOut(auth);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider value={{ user, logOut, googleSignIn }}>
      {children}
    </AuthContext.Provider>
  );
};

export const userAuth = () => {
  return useContext(AuthContext);
};

Firebase初始化代码 #

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

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