IT巫师最近在 HarmonyOS 6 上重构一个社区应用的列表页，遇到了一个很刁钻的问题：列表数据完全正确，点击事件的回调也正确，但用户快速滑动后再点某个 item，跳进详情页却经常拿到另一条数据的 id。不是偶发，是十次能复现七八次。定位到最后，问题根本不在 router，也不在页面跳转本身，而在 ArkTS + ArkUI 的 List 复用机制、点击闭包和异步数据更新之间的协作方式。这篇文章就把我在 HarmonyOS 6 / ArkTS 环境下把 List 跳转从“靠运气”调到“指哪打哪”的完整经验写出来，包括数据绑定、路由传参、复用避坑、异步竞态处理和工程化收口，适合正在做列表页跳转、或者被 item 跳错参数折磨的开发同学参考。
1. 先搞清楚 List 跳转会“失准”的三个根因
1.1 点击事件绑定的是 index，而不是数据本身
很多初版代码长得很像这样：ForEach(this.dataList, (item, index) => { ListItem() { ... }.onClick(() => this.jumpByIndex(index)) })。数据量小、页面不做刷新的时候，这样的写法看起来完全正常。但一旦数据源发生变化，例如下拉刷新、删除一条、分页加载追加，index 对应的对象就不再是之前渲染时看到的那个对象了。
举个实际场景：列表第一页有 20 条数据，用户滑到第 15 条时触发分页加载，第 21 条到第 40 条插入数组。此时如果用户点击的是屏幕上的第 15 个 item，组件渲染时传入的 index 仍然可能是 14，但 this.dataList[14] 已经因为数组插入而变成了新的数据对象。如果你用的是“先拿到 index，再用 index 去 this.dataList[index] 取对象”，那么你跳转前取到的就不是用户看到的那条数据。
从根子上说，index 是渲染位置，不是业务身份。列表一旦发生增删、排序、过滤，index 就会和数据对象脱钩。跳转要准确，第一步就是把“点击参数”从 index 换成 item 本身的业务主键，通常是 id。
1.2 列表项复用让“闭包里的数据”不一定属于当前 UI
ArkUI 的 List 是懒加载 + 复用机制的，这点和 RecyclerView、Flutter 的 ListView 没有本质区别。屏幕上只保留可见区域的 ListItem，滑出去的 item 会进入复用池，滑回来时再用新数据重新绑定。
如果在一个自定义子组件里写了类似这样的代码：
arkts复制@Component
struct ItemCard {
@Prop item: ItemData = {} as ItemData;
@Prop index: number = -1;
onTap?: (index: number) => void;
build() {
Column() {
Text(this.item.title)
}
.onClick(() => {
this.onTap?.(this.index);
})
}
}
父组件回调里再写：
arkts复制private handleTap(index: number): void {
const target = this.dataList[index];
router.pushUrl({ url: 'pages/DetailPage', params: { id: target.id } });
}
问题就藏在这里：ItemCard 的 UI 可能被复用到另一条数据上，但回调携带的 index 是当前复用后的最新渲染位置。如果数据源在两次渲染之间发生过变化，this.dataList[index] 拿到的对象，很可能不是当前屏幕上展示的那条。这个坑非常隐蔽，因为 UI 看起来是正常的，跳转参数却已经错了。
1.3 列表刷新与页面路由是两个独立时间线
即使你传的是 item 对象本身，也不能完全保证跳转准确。还有一种情况：用户在一个列表页里点击 item A，跳转详情页的过程中，列表页在 onPageHide 或 aboutToDisappear 里触发了一次异步刷新，数据源被整体替换了。假如你在详情页里不是直接用 params.id 拉数据，而是先读一个共享的“当前选中项”全局变量，那这个全局变量很可能被刷新回调覆盖成了 dataList[0]，详情页自然就跳错了。
所以根因不只是点击时取错数，还包括“取到数之后，到真正消费这个数之前，数据变了”。跳转准确性的本质是：把用户看到的那条数据的身份，稳定地传给详情页，并且让这个身份在传输链路中不受列表刷新和组件复用的影响。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 最小可复现：一个能跑通的 List 跳转 Demo
2.1 建页面、数据模型和详情页
先给一个正确基线。这个 Demo 我是在 HarmonyOS 6 对应的 DevEco Studio 版本上跑的，API 版本不是特别重要，老项目升级到新 SDK 也能直接用。核心思路是：key 稳定、传 id、不碰 index。
arkts复制// ListPage.ets
import { router } from '@kit.ArkUI';
i