React Redux项目用户名显示undefined如何替换为资料更新提示链接

现有代码直接对可选链返回的字段进行字符串拼接，当firstName/middleName/lastName任意字段未设置（值为undefined）时，拼接过程会自动将undefined转为"undefined"字面量插入最终文本，就会出现异常显示。

import { useSelector } from "react-redux";
// 如果用到路由跳转可以引入Link组件，不需要的话也可以用普通可点击元素绑定跳转逻辑
// import { Link } from "react-router-dom";
import Typography from "@mui/material/Typography";

const mapState = ({ user }) => ({
  currentUser: user.currentUser,
});

const Settings = () => {
  const { currentUser } = useSelector(mapState);

  // 处理姓名拼接逻辑
  const validNameParts = [
    currentUser?.firstName,
    currentUser?.middleName,
    currentUser?.lastName
  ].filter(Boolean); // 过滤undefined、空字符串等无效值
  const displayName = validNameParts.join(' ');

  return (
    <>
       <Typography>
         Hello, {
           displayName || <span style={{color: '#1976d2', cursor: 'pointer'}} onClick={() => {/* 此处替换为跳转到个人资料页的业务逻辑 */}}>请点击更新个人资料</span>
         }
       </Typography>
    </>
  );
};

export default Settings;

• 姓名拼接前先过滤所有无效的空值字段，避免undefined被转为字符串插入结果，同时也不会出现多余的空格
• 当过滤后的姓名字段为空时，直接显示引导更新资料的可点击文案，你可以根据设计稿调整文案样式和跳转逻辑

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