React使用Auth0条件渲染：一处正常另一处报user.name未定义错误求助

问题描述 #

我通过Auth0的user.name实现条件渲染，其中ClientSurveyStats组件可以正常根据用户展示对应统计内容，但代码配置看似相同的MenuBar组件却抛出错误：TypeError: Cannot read properties of undefined (reading 'name')，无法找到两者差异，求排查原因。

正常工作的组件代码 #

import React from 'react';
import StatsFull from './StatsFull';
import StatsSummary from './StatsSummary';
import StatsSummaryCurrentYear from './StatsSummaryCurrentYear';
import StatsSummaryLastYear from './StatsSummaryLastYear';
import { useAuth0 } from '@auth0/auth0-react';

const ClientSurveyStats = () => {

    const { user } = useAuth0();
    

    if (user.name === "email1@email.com" || user.name === "email2@email.com" || user.name === "email3@email.com") {
        return <StatsFull />
    } else {
        return (
            <div>
                <StatsSummaryCurrentYear />
                <StatsSummaryLastYear />
            </div>
            
        )
    }

}

export default ClientSurveyStats;

报错的组件代码 #

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const MenuBar = () => {

  const { user } = useAuth0();

if (user.name === "email1@email.com" || user.name === "email2@email.com" || user.name === "email3@email.com") {
        return (
            <div>
                <button href="/billingcalculator">
                  <i className="fa-duotone fa-face-tongue-money fa-2x"></i>
                  <div>Billing<br/>Calculator</div>
                </button>
            </div>
       )
    }
       
}

export default MenuBar;

原因分析 #

核心问题是**MenuBar组件渲染时，Auth0的user对象还未完成初始化，处于undefined状态**。

• ClientSurveyStats能正常工作，大概率是因为它的渲染时机更靠后：要么是在路由跳转后才加载，此时Auth0已经完成用户会话初始化；要么是它的父组件已经做了登录状态校验（比如用withAuthenticationRequired高阶组件，或者提前判断了user存在才渲染该组件）。
• MenuBar通常是应用全局导航组件，会在应用启动时立即渲染，此时Auth0还在异步加载用户信息，user还未被赋值，直接访问user.name就会触发"读取undefined属性"的错误。

解决方法 #

方法1：先判断user是否存在，再访问属性 #

修改MenuBar代码，先校验user不为undefined，再进行条件判断：

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const MenuBar = () => {
  const { user } = useAuth0();

  // 先判断user是否存在，再访问name属性
  if (user && (user.name === "email1@email.com" || user.name === "email2@email.com" || user.name === "email3@email.com")) {
    return (
      <div>
        <button href="/billingcalculator">
          <i className="fa-duotone fa-face-tongue-money fa-2x"></i>
          <div>Billing<br/>Calculator</div>
        </button>
      </div>
    )
  }

  // 当user不存在或不满足条件时，返回null或默认占位内容
  return null;
}

export default MenuBar;

方法2：利用Auth0的isLoading状态等待初始化完成 #

通过useAuth0提供的isLoading状态，在用户信息加载完成前不渲染目标内容：

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const MenuBar = () => {
  const { user, isLoading } = useAuth0();

  // 加载中时返回加载提示或空内容
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (user.name === "email1@email.com" || user.name === "email2@email.com" || user.name === "email3@email.com") {
    return (
      <div>
        <button href="/billingcalculator">
          <i className="fa-duotone fa-face-tongue-money fa-2x"></i>
          <div>Billing<br/>Calculator</div>
        </button>
      </div>
    )
  }

  return null;
}

export default MenuBar;

方法3：全局统一校验登录状态 #

在应用入口或路由层面，用Auth0的withAuthenticationRequired高阶组件包裹需要用户信息的页面，确保只有登录完成后才渲染相关组件，从根源避免user未初始化的问题。

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