授权跳转至/userProfile页面遇TypeError：无法读取null的'name'属性求助

看起来你遇到的问题核心是**userData在某个时刻变成了null**，导致渲染时访问userData.name触发报错。结合你的代码，咱们一步步拆解原因并给出修复方案：

1. 定位问题根源 #

你初始化userData时是一个包含默认值的对象，但报错说明它后来变成了null。大概率是这两个原因：

• 你的API接口/api/user/getDataByUserId返回的r.data是null（比如userId无效、用户不存在），执行setUserData(r.data)后直接把userData改成了null。
• useEffect里只处理了请求成功的情况，没有捕获请求失败的异常，导致未捕获的promise错误同时出现。

2. 具体修复步骤 #

步骤一：给渲染逻辑加安全防护 #

使用**可选链操作符（?.）**避免null/undefined报错，同时结合loading状态做条件渲染，提升用户体验：

const Page = () => {
  return (
    <div>
      {loading ? (
        <div>加载中...</div>
      ) : (
        <div style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
          {/* 用?.访问属性，不存在时显示空字符串 */}
          <h1>{`${userData?.name || ''} ${userData?.surname || ''}`}</h1>
          <button onClick={() => logout()} style={{display: "block"}} className="btn btn-large "> Выйти</button>
        </div>
      )}
    </div>
  );
};

步骤二：处理API返回的null数据 #

在useEffect的回调里，判断返回的r.data是否有效，无效时用默认对象兜底：

useEffect(() => {
  // 先判断userId是否有效，避免发起无效请求
  if (!userId) return;

  const response = request("/api/user/getDataByUserId", "POST", {userId: userId});
  response.then(r => {
    // 如果返回数据是null，用初始化的默认对象替代
    setUserData(r.data || {name: "", surname: "", posts: [], email: "", password: ""});
  }).catch(err => {
    // 捕获请求失败的异常，做错误日志和兜底处理
    console.error('获取用户数据失败:', err);
    setUserData({name: "", surname: "", posts: [], email: "", password: ""});
  });
}, [request, userId]);

步骤三：确认userId的有效性 #

检查从AuthContext获取的userId是否为有效值（比如不是undefined、空字符串），如果userId无效，直接跳过请求，避免触发API返回null的情况。

3. 额外优化建议 #

• 如果项目使用TypeScript，可以给userData添加类型定义，从类型层面避免意外的null值。
• 错误发生时，可以给用户显示友好提示（比如“获取用户信息失败，请重新登录”），而不是只在控制台打印日志。

这样修改后，既能解决当前的TypeError问题，也能提升组件的容错性和用户体验。

内容的提问来源于stack exchange，提问作者Артём Лукичёв