Next.js客户端渲染中使用动态路由参数获取数据遇未定义问题

1. 路由参数加载时机问题：Next.js客户端组件中，router.query在页面初始渲染时可能为undefined——路由还未完成解析，此时直接解构pid会拿到无效值。
2. useEffect依赖缺失：你的useEffect依赖数组为空，仅在组件挂载时执行一次，此时pid还未获取到，导致请求URL为.../undefined，接口返回数据异常或失败，chatItem未被正确赋值，最终访问chatItem.admin时报错。
3. loading状态处理错误：setLoading(false)是同步执行的，会在异步请求完成前就把loading设为false，导致页面提前渲染未初始化的chatItem。

1. 修正useEffect依赖与参数校验 #

将pid加入useEffect的依赖数组，确保pid变化时重新发起请求；同时在请求前判断pid是否存在，避免无效请求：

const router = useRouter();
const { pid } = router.query;
const [loading, setLoading] = useState(true);
const [chatItem, setChatItem] = useState({});

useEffect(() => {
  // pid不存在时直接返回，避免无效请求
  if (!pid) return;

  const getChatList = async () => {
    try {
      setLoading(true);
      const res = await axios.get(
        `${process.env.NEXT_PUBLIC_API_URL}api/chat/${pid}`
      );
      setChatItem(res.data);
    } catch (err) {
      console.error('获取聊天数据失败:', err);
      // 可在此添加错误提示逻辑
    } finally {
      setLoading(false);
    }
  };

  getChatList();
}, [pid]); // 依赖数组加入pid

return (
  <div>
    {loading ? (
      <h2>loading</h2>
    ) : (
      <div>
        <h3>Chat Admin: {chatItem.admin || 'N/A'}</h3>
        <h3>Chat Name: {chatItem.chatName || 'N/A'}</h3>
        <h3>Chat Title: {chatItem.chatTitle || 'N/A'}</h3>
        <h3>This chat has {chatItem.members?.length || 0} members</h3>
      </div>
    )}
  </div>
);

2. 额外优化建议 #

• 使用可选链操作符?.（如chatItem.members?.length）避免访问未定义属性报错；
• 如果是Next.js Pages Router，可通过getServerSideProps在服务端获取路由参数并提前请求数据，彻底避免客户端初始加载的参数问题：

// pages/chat/[pid].js
export async function getServerSideProps(context) {
  const { pid } = context.params;
  const res = await axios.get(
    `${process.env.NEXT_PUBLIC_API_URL}api/chat/${pid}`
  );
  const chatItem = res.data;

  return {
    props: { chatItem } // 直接传递给组件的props
  };
}

function ChatPage({ chatItem }) {
  return (
    <div>
      <h3>Chat Admin: {chatItem.admin}</h3>
      <h3>Chat Name: {chatItem.chatName}</h3>
      <h3>Chat Title: {chatItem.chatTitle}</h3>
      <h3>This chat has {chatItem.members.length} members</h3>
    </div>
  );
}

export default ChatPage;

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