React+Firebase使用Context时出现createUser is not a function错误求助

问题原因 #

你遇到的createUser is not a function错误，根源在于AuthContext的Provider传递值时多嵌套了一层对象：
在AuthProvider.js中，你把封装好的authValue对象又用{ authValue }包裹后传给了AuthContext.Provider，这导致组件通过useContext获取到的是一个包含authValue属性的外层对象，而非直接拿到createUser、user等属性。

修复方案 #

1. 修改AuthProvider.js的Provider值 #

打开AuthProvider.js，找到return中的AuthContext.Provider部分，将value={{ authValue }}改为value={authValue}：

修改前：

return (
  <AuthContext.Provider value={{ authValue }}>
    {children}
  </AuthContext.Provider>
);

修改后：

return (
  <AuthContext.Provider value={authValue}>
    {children}
  </AuthContext.Provider>
);

2. 确认SignUp.js的Context解构逻辑 #

你的SignUp.js中使用const { createUser, user, loading } = useContext(AuthContext);的解构方式是正确的，只要完成第一步的修改，就能直接获取到createUser函数，无需额外调整。

验证修复 #

修改完成后，重新运行项目，提交SignUp表单时，createUser函数就能正常调用Firebase的createUserWithEmailAndPassword方法，不会再出现函数未定义的错误。

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