NextJS从URL取参数报错：TypeError: Cannot read properties of undefined (reading 'q')

问题说明 #

在URL中传入搜索参数后，尝试在search.js组件通过router提取参数时，触发以下错误：

TypeError: Cannot read properties of undefined (reading 'q')

相关代码 #

表单代码

<form onSubmit={handleSubmit}>
  <input
    type="text"
    placeholder="Search..."
    value={searchValue}
    onChange={(e) => setSearchValue(e.target.value)}
    class="w-full px-4 py-2 rounded-md text-gray-900"
  />
  <button type="submit">Submit</button>
</form>

提交处理函数

const handleSubmit = (event) => {
  event.preventDefault(); // 阻止默认表单提交行为
  router.push(`../search?q=${encodeURIComponent(searchValue)}`);
};

Search.js组件代码

const Search = () => {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    if (router.isReady) {
      setSearchQuery(router.query.q || '');
    }
  }, [router.isReady, router.query.q]);

  if (!router.isReady) {
    return <div>Loading...</div>; // 加载状态提示
  }

  return (
    <div>
      <p>Search Query: {searchQuery}</p>
    </div>
  );
};

export default Search;

修复方案 #

1. 安全访问router.query.q并调整依赖项 #

错误根源在于useEffect依赖项中直接引用router.query.q，当router.query还未初始化时，访问q会触发undefined错误。修改如下：

useEffect(() => {
  if (router.isReady) {
    // 使用可选链操作符安全访问q
    setSearchQuery(router.query?.q || '');
  }
}, [router.isReady, router.query]); // 依赖项改为router.query而非router.query.q

2. 改用绝对路径跳转 #

相对路径../search可能导致路由解析异常，建议使用绝对路径确保跳转目标正确：

router.push(`/search?q=${encodeURIComponent(searchValue)}`);

3. 简化组件逻辑（可选优化） #

既然已经通过router.isReady做了加载判断，可以直接在渲染阶段获取参数，省去额外的useState和useEffect：

const Search = () => {
  const router = useRouter();

  if (!router.isReady) {
    return <div>Loading...</div>;
  }

  const searchQuery = router.query?.q || '';

  return (
    <div>
      <p>Search Query: {searchQuery}</p>
    </div>
  );
};

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