React渲染单用户Profile时出现profile is null错误求助

尝试通过ID渲染单个Profile组件时，控制台返回profile is null错误。排查后发现错误源于Profile.js中控制编辑按钮显示的代码块，注释该代码块后，GET_PROFILE动作可正常获取用户数据，取消注释则触发报错。

Profile.js #

import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import ProfileTop from './ProfileTop';
import ProfileAbout from './ProfileAbout';
import ProfileExperience from './ProfileExperience';
import ProfileEducation from './ProfileEducation';
import ProfileGithub from './ProfileGithub';
import { getProfileById } from '../../actions/profile';

const Profile = ({ getProfileById, profile: { profile }, auth }) => {
  const { id } = useParams();
  useEffect(() => {
    getProfileById(id);
  }, [getProfileById, id]);

  return (
    <section className="container">
       
        <Fragment>
          <Link to="/profiles" className="btn btn-light">
            Back To Profiles
          </Link>
        </Fragment>
        {auth.isAuthenticated &&
            auth.loading === false &&
            auth.user._id === profile.user._id && (
              <Link to="/edit-profile" className="btn btn-dark">
                Edit Profile
              </Link>
            )}
    </section>
  );
};

Profile.propTypes = {
  getProfileById: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = (state) => ({
  profile: state.profile,
  auth: state.auth
});

export default connect(mapStateToProps, { getProfileById })(Profile);

getProfileById 动作函数 #

// Get profile by ID
export const getProfileById = (userId) => async (dispatch) => {
  try {
    const res = await axios.get(`http://localhost:5000/api/profile/user/${userId}`);

    dispatch({
      type: GET_PROFILE,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: PROFILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

报错代码块 #

{auth.isAuthenticated &&
  auth.loading === false &&
  auth.user._id === profile.user._id && (
    <Link to="/edit-profile" className="btn btn-dark">
      Edit Profile
    </Link>
  )}

后端路由 #

router.get('/user/:user_id', checkObjectId('user_id'), async ({ params: { user_id } }, res) => {
  try {
    const profile = await Profile.findOne({
      user: user_id
    }).populate('user', ['name', 'avatar']);

    if (!profile) return res.status(400).json({ msg: 'Profile not found' });

    return res.json(profile);
  } catch (err) {
    console.error(err.message);
    return res.status(500).json({ msg: 'Server error' });
  }
}
);

问题根源是组件初始化阶段profile为null，此时直接访问profile.user._id会触发空指针错误。可以通过以下两种方式修复：

方案1：增加profile存在判断

在判断链中先检查profile是否有效，避免访问null对象的属性：

{auth.isAuthenticated &&
  auth.loading === false &&
  profile && // 新增判断，确保profile不为null/undefined
  auth.user._id === profile.user._id && (
    <Link to="/edit-profile" className="btn btn-dark">
      Edit Profile
    </Link>
  )}

方案2：使用可选链操作符

利用ES6+的可选链语法，自动处理null/undefined的属性访问：

{auth.isAuthenticated &&
  auth.loading === false &&
  auth.user._id === profile?.user?._id && ( // 可选链避免空指针
    <Link to="/edit-profile" className="btn btn-dark">
      Edit Profile
    </Link>
  )}

额外建议：增加加载状态处理，在profile未获取完成时显示加载组件，提升用户体验：

return (
  <section className="container">
    {profile === null ? (
      <Spinner />
    ) : (
      <>
        <Link to="/profiles" className="btn btn-light">
          Back To Profiles
        </Link>
        {auth.isAuthenticated &&
          auth.loading === false &&
          profile &&
          auth.user._id === profile.user._id && (
            <Link to="/edit-profile" className="btn btn-dark">
              Edit Profile
            </Link>
          )}
        {/* 渲染ProfileTop、ProfileAbout等其他组件 */}
      </>
    )}
  </section>
);

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