React集成Firebase注册功能时出现Cannot read property 'email' of null错误

错误原因 #

1. 未登录场景下currentUser值为null/undefined，直接访问.email属性会抛出空值读取错误
2. 方法名大小写不匹配：AuthContext.js中导出的注册方法名为小写signup，但SignUp.js中解构时用了大写Signup，会导致注册方法调用失败

修复方案 #

1. 空值安全访问用户邮箱
   将SignUp.js第36行的代码：

{ currentUser.email}

修改为以下任意一种即可：

• 可选链写法（推荐）：

{ currentUser?.email }

• 条件渲染写法：

{ currentUser && currentUser.email }

如果需要在未登录时显示提示，也可以写为：

{ currentUser?.email || "未登录用户" }

2. 修正注册方法名大小写
   修改SignUp.js中解构和调用注册方法的代码：

// 原解构代码
const { Signup, currentUser } = useAuth()
// 改为小写signup
const { signup, currentUser } = useAuth()

// 原调用代码
await Signup(emailRef.current.value, passwordRef.current.value)
// 改为小写signup
await signup(emailRef.current.value, passwordRef.current.value)

修复完成后即可解决报错，注册功能也可正常调用。

内容的提问来源于stack exchange，提问作者Abhijeet John Kujur