Next.js+Firebase项目useAuth非函数报错求助

常见原因及修复步骤 #

• 检查导出与导入的匹配性
  确认AuthContext.js中useAuth的导出方式：

  • 如果是命名导出（export function useAuth()），则Navbar.jsx中必须用花括号导入：import { useAuth } from '../lib/AuthContext'
  • 如果是默认导出（export default function useAuth()），则导入时不能用花括号：import useAuth from '../lib/AuthContext'
    两者不匹配是触发该报错的最常见原因。

• 验证useAuth钩子的定义
  检查AuthContext.js中是否正确定义了useAuth函数：

  • 确保函数名拼写无误（比如不要写成useAuthh或useUser）
  • 确认它是符合React Hook规则的自定义钩子：必须在内部调用useContext，且只能在函数组件或其他Hook中调用。

• 核对文件导入路径
  确认Navbar.jsx中导入AuthContext的路径正确：

  • 注意路径的层级（比如../lib还是../../lib）
  • 区分大小写（部分操作系统/文件系统对文件名大小写敏感，比如AuthContext.js不能写成authcontext.js）

• 确认AuthProvider已包裹应用
  确保在根组件（layout.js或_app.js）中使用AuthProvider包裹整个应用，否则useAuth无法获取上下文：

  // layout.js
  import { AuthProvider } from '@/lib/AuthContext'
  
  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <body>
          <AuthProvider>{children}</AuthProvider>
        </body>
      </html>
    )
  }
  

正确代码示例 #

AuthContext.js

import { createContext, useContext, useEffect, useState } from 'react'
import { auth } from './firebase'
import { onAuthStateChanged } from 'firebase/auth'

const AuthContext = createContext()

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user)
      setLoading(false)
    })
    return unsubscribe
  }, [])

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

// 命名导出useAuth钩子
export function useAuth() {
  return useContext(AuthContext)
}

Navbar.jsx

import { useAuth } from '../lib/AuthContext'

export default function Navbar() {
  const { user, loading } = useAuth()

  if (loading) return <div>加载中...</div>

  return (
    <nav className="navbar">
      {/* 其他导航元素 */}
      {user && <span className="user-email">当前用户：{user.email}</span>}
    </nav>
  )
}

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