Next.js页面间传值报错：TypeError: Cannot read properties of undefined (reading 'users')

问题根源拆解 #

1. 路由路径错误：Next.js App Router模式下，页面文件存放在app目录，跳转路径无需加/pages前缀，原代码中pathname: '/pages/mainPage'会导致路径无效。
2. 接收端参数处理不当：next/navigation的useRouter返回的query在页面初始加载时可能为undefined，直接访问router.query.users会触发报错；同时传递的参数名是users，接收端却试图解构不存在的userAmount，命名不匹配。
3. 发送端状态缺失：原发送组件未展示users状态的定义与更新逻辑，可能导致传递空值或未初始化的变量。

修正后的代码示例 #

发送数据组件（假设为app/page.js） #

'use client'
import { useState } from 'react';
import Link from 'next/link';

const Page = () => {
  const [users, setUsers] = useState('');

  const saveInput = (e) => {
    setUsers(e.target.value);
  };

  const checkAmount = (e) => {
    e.preventDefault();
    // 可在此添加输入验证，比如判断是否为正整数
  };

  return (
    <>
      <h1>Zeke´s Bill Splitter</h1>
      <h2>Enter the amount of people</h2>
      <form onSubmit={checkAmount}>
        <input 
          type="number"
          value={users}
          onChange={saveInput} 
          min="1"
        />
        <button type="submit">确认人数</button>
      </form>
      <Link 
        href={{
          pathname: '/mainPage',
          query: { users: users }
        }}>Go to main</Link>
    </>
  );
};

export default Page;

接收数据组件（假设为app/mainPage/page.js） #

"use client"
import React from 'react'
import { useRouter } from "next/navigation"

const MainPage = () => {
  const router = useRouter()
  // 用可选链操作符避免query未定义时的报错，参数名与发送端保持一致
  const userAmount = router.query?.users;

  return (
    <div>参与人数：{userAmount}</div>
  )
}

export default MainPage

额外注意事项 #

• 确保页面文件在app目录下的结构正确：根页面是app/page.js，跳转目标页面是app/mainPage/page.js。
• 若需更严谨的状态处理，可在接收端添加加载状态判断，或用useEffect监听query的变化：

  useEffect(() => {
    if (router.query?.users) {
      // 处理参数逻辑
    }
  }, [router.query])
  

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