Next.js 14 App Router中动态路由参数变更时useEffect未触发的原因及解决方案咨询

这个问题其实是Next.js 14 App Router里客户端组件复用机制和React useEffect依赖比较逻辑结合导致的常见坑，我来帮你拆解原因和解决方案：

首先，先解释为什么你的useEffect没触发：
在App Router中，当通过<Link>导航到同一路由模板（比如/products/[id]）的不同参数时，客户端组件会被复用而不是重新挂载。虽然你看到params.id确实更新了，但useParams返回的是一个响应式代理对象——这个对象的引用在路由变化时保持不变，只有内部的id属性值会更新。

你可能会问：那我已经把id提取出来作为依赖了，为什么还是没触发？这里有两个核心原因：

1. 竞态条件：旧的请求在新请求之后完成，覆盖了新产品数据，让你误以为useEffect没触发（其实它触发了，但结果被旧请求覆盖了）。
2. React浅比较的小陷阱：虽然id是值类型，但在某些情况下，代理对象的属性读取可能没有被React的渲染周期正确捕捉到，导致useEffect的依赖比较没识别到变化。

接下来是解决方法，按推荐优先级排序：

1. 优先使用服务器组件获取数据（最推荐） #

App Router的核心优势就是服务器端渲染和数据获取，把数据逻辑移到服务器组件可以完全避免这个问题，路由参数变化时服务器会自动重新获取数据：

// app/products/[id]/page.tsx（去掉'use client'，这是服务器组件）
import { notFound } from 'next/navigation';

interface Product {
  id: number;
  title: string;
  description: string;
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  // 添加revalidate配置可以控制缓存策略，这里设置60秒重新验证
  const res = await fetch(`https://dummyjson.com/products/${params.id}`, { next: { revalidate: 60 } });

  if (!res.ok) {
    notFound(); // 处理404情况
  }

  const product: Product = await res.json();

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

2. 客户端组件使用React use钩子（React 18+） #

如果你必须在客户端组件中获取数据，可以使用React 18引入的use钩子，它会自动响应参数变化，并且内置了竞态条件处理：

'use client';
import { useParams } from 'next/navigation';
import { use } from 'react';

interface Product {
  id: number;
  title: string;
  description: string;
}

export default function ProductPage() {
  const params = useParams();
  const id = params.id as string;

  // 定义异步获取函数
  const fetchProduct = async () => {
    const res = await fetch(`https://dummyjson.com/products/${id}`);
    return res.json() as Promise<Product>;
  };

  // use钩子会自动处理异步逻辑和参数变化
  const product = use(fetchProduct());

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

3. 修复原有useEffect的问题（添加清理函数） #

如果你想保留原有的useEffect写法，需要添加清理函数来取消旧请求，避免竞态条件，同时确保依赖数组正确：

'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';

interface Product {
  id: number;
  title: string;
  description: string;
}

export default function ProductPage() {
  const params = useParams();
  const id = params.id as string;
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    let isCancelled = false; // 标记请求是否被取消

    const fetchProduct = async () => {
      try {
        const res = await fetch(`https://dummyjson.com/products/${id}`);
        // 只有当请求未被取消时，才更新状态
        if (!isCancelled) {
          const data = await res.json();
          setProduct(data);
        }
      } catch (error) {
        if (!isCancelled) {
          console.error('Failed to fetch product:', error);
        }
      }
    };

    fetchProduct();

    // 组件卸载或参数变化时，标记旧请求为取消
    return () => {
      isCancelled = true;
    };
  }, [id]); // 确保id在依赖数组中

  if (!product) return <p>Loading...</p>;

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

最后，你提到的key={id}强制重新挂载确实有效，但这是一种hack手段——它会让组件完全重新初始化，丢失所有状态，所以不推荐作为常规解决方案。

这个问题不是Next.js的已知bug，而是App Router的组件复用机制和React useEffect的依赖比较逻辑共同作用的结果，用上面的方法就能完美解决。

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