React点击渲染组件问题：Portfolio组件profile props未定义

你的核心问题是路由跳转逻辑错误：点击卡片时调用navigate会触发页面路由切换，当前页面的组件会被卸载，你写的return <Portfolio profile={profile} />根本不会被渲染。Portfolio组件是由路由系统负责加载的，自然拿不到你试图直接传递的props。

下面是两种可行的解决思路：

方案一：通过路由参数重新获取数据（推荐） #

这种方式最稳定，即使页面刷新也不会丢失数据，符合路由组件的设计逻辑。

1. 修改多资料页面的跳转逻辑 #

只需要触发路由跳转，不需要返回Portfolio组件：

return (
  <div>
    {profiles.map((profile) => {
      const portfolioShow = () => {
        console.log("Portfolio Show: ", profile.user);
        navigate(`/portfolio/${profile.user}`);
      };

      return (
        <div
          key={profile.user}
          onClick={portfolioShow}
        >
          {/* 展示个人资料的组件 */}
        </div>
      );
    })}
  </div>
);

2. 在Portfolio组件中通过路由参数获取并查询数据 #

用useParams拿到路由里的user参数，然后从Firestore重新获取对应的profile：

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
// 导入你的Firestore操作方法

export default function Portfolio() {
  const { user } = useParams();
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    if (!user) return;
    
    // 从Firestore查询对应user的profile
    const fetchProfile = async () => {
      // 替换成你的实际查询逻辑，比如：
      // const docRef = db.collection('profiles').doc(user);
      // const docSnap = await docRef.get();
      // if (docSnap.exists) setProfile(docSnap.data());
    };
    
    fetchProfile();
  }, [user]);

  if (!profile) {
    return <div>加载中...</div>;
  }

  useEffect(() => {
    console.log("Profile: ", profile);
  }, [profile]);

  return (
    <>
      {/* 渲染作品集和资料组件 */}
    </>
  );
}

方案二：通过路由状态传递数据（临时场景） #

如果不想重复请求Firestore，可以通过路由的state传递profile，但要注意：刷新页面后state会丢失，只适合不需要持久化的场景。

1. 修改多资料页面的跳转逻辑 #

跳转时携带state参数：

const portfolioShow = () => {
  navigate(`/portfolio/${profile.user}`, { state: { profile } });
};

2. 在Portfolio组件中读取路由状态 #

用useLocation获取传递的state：

import { useLocation } from 'react-router-dom';

export default function Portfolio() {
  const location = useLocation();
  const profile = location.state?.profile;

  useEffect(() => {
    console.log("Profile: ", profile);
  }, [profile]);

  if (!profile) {
    return <div>无法获取个人资料</div>;
  }

  return (
    <>
      {/* 渲染作品集和资料组件 */}
    </>
  );
}

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