Next.js动态路由同模板页面跳转内容不更新异常排查

这个问题和Prismic配置无关，是Next.js Pages Router动态路由的固有机制导致的：不同路由文件对应的组件跳转时会完整销毁、挂载新组件；但同一个动态路由文件（比如/work/[uid].js）下不同参数的路由互跳时，Next.js默认会复用当前组件实例，仅更新传入的props，不会重新执行组件挂载生命周期，这就是为什么从首页、列表页跳详情正常，只有同详情页互跳出现异常。
具体对应到你的代码有两个直接触发点：

• 入场动画的useEffect依赖为空数组，仅在组件首次挂载时执行，组件复用时不会重新触发，且动画执行过的状态（遮罩层透明度为0）会残留
• 组件复用+子组件可能存在的浅比较渲染优化，导致新传入的页面props没有被正确渲染，出现内容保留旧页面数据的情况

1. 强制路由变化时重置组件实例（最直接有效） #

引入路由hook拿到当前页面uid，给页面根节点加绑定uid的key，只要路由参数变化，React会直接销毁旧组件、挂载全新的组件实例，从根源解决组件复用导致的所有问题，对静态站点的性能影响可以忽略：

import { useEffect, useRef } from 'react';
import { useRouter } from 'next/router'; // 新增引入
// 其余引入保持不变

const ProjectDetail = ({ data, url, lang, layout }) => {
  const router = useRouter();
  const { uid } = router.query; // 取当前路由的项目uid
  // 其余内部逻辑保持不变

  return (
    // 给根节点加key，绑定当前uid
    <div key={uid}>
      <Layout seo={seo} {...layout}>
        <ProjectHero {...pageData} />
        <SliceZone slices={data.slices} resolver={resolver} />
        { 
          prismicH.isFilled.link(data.relatedProject) ? (
            <RelatedProjectCta {...relatedProject}/>
          )
          : null
        }
      </Layout>
    </div>
  );
};

2. 修正getStaticPaths返回格式（规避潜在匹配问题） #

你当前用prismicH.asLink返回字符串路径的写法虽然大部分场景能运行，但Next.js官方推荐动态路由返回带params的对象格式，避免路径匹配错误导致的静态props拉取异常：

export const getStaticPaths = async () => {
  const client = createClient();
  const projectDetail = await client.getAllByType("project");

  return {
    paths: projectDetail.map((page) => ({
      params: { uid: page.uid } // 明确指定动态段参数
    })),
    fallback: false,
  };
};

3. 优化动画逻辑（可选，适配无key的场景） #

如果不想用key强制重挂载，可以调整动画useEffect的依赖，每次uid变化时先重置遮罩层初始状态再执行动画，避免状态残留：

useEffect(() => {
  // 先重置遮罩层到初始不透明状态
  gsap.set(revealOverlay.current, { opacity: 1 });
  // 再执行入场动画
  gsap.to(revealOverlay.current, {
    opacity: 0,
    duration: 2.3,
    ease: "power2.out"
  });
}, [uid]); // 依赖加入口参数uid

4. 减少不必要的对象创建（性能优化） #

你当前每次渲染都新建pageData、relatedProject包装对象不会直接导致功能异常，但会触发子组件不必要的重渲染，可以直接传原始props：

// 删除冗余的包装对象定义
// const pageData = { data };
// const relatedProject = { data };

return (
  <div key={uid}>
    <Layout seo={seo} {...layout}>
      <ProjectHero data={data} />
      <SliceZone slices={data.slices} resolver={resolver} />
      { 
        prismicH.isFilled.link(data.relatedProject) ? (
          <RelatedProjectCta data={data}/>
        )
        : null
      }
    </Layout>
  </div>
);

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