Stack Overflow克隆站提交问题时出现TypeError：无法读取null的result属性

问题原因 #

报错出现在AskQuestion.jsx的User.result.name调用处，因为currentUserReducer的初始状态是null，当用户未完成登录流程、FETCH_CURRENT_USER动作还未触发时，useSelector获取到的User就是null，此时访问User.result自然会抛出类型错误。

修复方案 #

方案1：添加登录状态判断 #

修改handleSubmit函数，先检查用户是否已登录，避免直接访问null的属性：

const handleSubmit = (e) => {
    e.preventDefault()
    // 先验证登录状态
    if (!User) {
        alert('请先登录再提交问题')
        navigate('/login')
        return
    }
    dispatch(askQuestion({ 
        questionTitle, 
        questionBody, 
        questionTags, 
        userPosted: User.result.name 
    }, navigate))
}

方案2：使用可选链操作符简化空值处理 #

如果需要兼容未登录场景（比如允许匿名提问），可以用可选链+默认值避免报错：

dispatch(askQuestion({ 
    questionTitle, 
    questionBody, 
    questionTags, 
    userPosted: User?.result?.name || '匿名用户'
}, navigate))

方案3：组件层面提前拦截未登录状态 #

在组件渲染时直接判断登录状态，未登录则展示登录提示而非提问表单：

return (
    <div className="ask-question">
        {!User ? (
            <div className="login-prompt">
                <h3>请先登录才能提问</h3>
                <button onClick={() => navigate('/login')}>去登录</button>
            </div>
        ) : (
            <div className="ask-ques-container">
                {/* 原表单内容 */}
                <h1>Ask a Public Question</h1>
                <form onSubmit={handleSubmit}>
                    {/* 表单输入项 */}
                </form>
            </div>
        )}
    </div>
)

方案4：优化Reducer初始状态 #

将currentUserReducer的初始状态改为包含空结构的对象，避免直接返回null：

const currentUserReducer = (state = { result: {} }, action) => {
    switch(action.type) {
        case "FETCH_CURRENT_USER":
            return action.payload;
        default:
            return state;
    }
}

注意：此方案需要确保FETCH_CURRENT_USER返回的payload结构与初始状态一致，避免后续出现其他属性访问错误。

额外建议 #

• 提交表单前可以添加字段非空验证，避免空数据发送到后端
• 开发阶段可以在useSelector后添加console.log(User)，确认用户状态的获取情况

内容的提问来源于stack exchange，提问作者Bishal Singh Deo