React报错：Uncaught TypeError: UserContext is not a function求解决

错误根源 #

你在AuthContext.js的UserAuth函数里直接把UserContext当作函数调用了，但UserContext是createContext创建的上下文对象，并非可执行函数。获取上下文值必须使用React的useContext Hook。

修复方案 #

1. 修正AuthContext.js代码 #

先导入useContext，再修改UserAuth的实现逻辑：

import { createContext, useContext } from 'react' // 新增useContext导入
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged
} from "firebase/auth"
import { auth } from "../firebase"

const UserContext = createContext()

export const AuthContextProvider = ({children}) => {

  const createUser = (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password)
  }

  // 建议传递对象作为value，方便后续扩展更多认证方法
  return (
    <UserContext.Provider value={{ createUser }}>
      {children}
    </UserContext.Provider>
  )
}

export const UserAuth = () => {
  return useContext(UserContext) // 通过useContext获取上下文值
}

2. 确保组件在Provider范围内 #

你的Signup组件必须被AuthContextProvider包裹才能正常获取上下文，比如在根组件中配置：

import { AuthContextProvider } from './AuthContext'
import Signup from './Signup'

function App() {
  return (
    <AuthContextProvider>
      <Signup />
    </AuthContextProvider>
  )
}

3. Signup.js代码无需修改 #

const {createUser} = UserAuth()

完成以上修改后，就能正确获取上下文里的createUser函数，解决类型错误问题。

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