Expensify/App 中费用报告预览跳转问题的技术分析

问题现象

在 Expensify/App 项目中，用户反馈了一个关于费用报告预览跳转的问题。具体表现为：当用户创建一个手动费用并选择"Manager McTest"作为接收人后，在1对1聊天中点击费用预览时，系统没有直接打开交易线程，而是打开了费用报告页面，需要用户再次点击才能查看交易详情。

技术背景

Expensify/App 是一个基于 React Native 的跨平台应用，主要用于费用管理和团队协作。系统中的费用报告功能涉及多个组件间的交互，包括报告创建、预览和跳转逻辑。

问题根源分析

通过开发团队的深入排查，发现问题出在报告动作类型判断逻辑上：

1. 当费用与"Manager McTest"关联时，parentReportAction返回的是REPORTPREVIEW类型而非预期的IOU类型
2. 这导致前端条件判断失效，无法正确识别应该直接跳转到交易线程的情况
3. 后端返回的IOUTransactionID值同时包含了pay和create类型的原始消息，而实际上应该只返回type: create的消息

解决方案

开发团队提出了两种解决方案：

1. 前端修复方案：修改ReportActionsUtils.ts文件中的过滤条件，增加对原始消息类型的检查

// 修改前
(!!originalMessage?.IOUTransactionID) ||

// 修改后
(!!originalMessage?.IOUTransactionID && originalMessage.type === 'create') ||

2. 后端修复方案：调整API返回数据，确保IOUTransactionID只与create类型的原始消息关联

影响范围

该问题最初仅在测试环境出现，但随后发现相关后端变更已部署到生产环境，导致生产环境也出现了相同问题。影响平台包括：

• Android应用和移动网页
• iOS应用和移动网页
• MacOS的Chrome/Safari浏览器和桌面应用

技术启示

这个案例展示了前后端数据契约的重要性。当后端返回的数据结构或内容发生变化时，必须确保：

1. 变更与前端预期保持一致
2. 进行充分的跨端测试
3. 建立完善的数据验证机制

对于类似的跨平台应用开发，建议：

1. 实现严格的数据类型检查
2. 建立前后端接口的版本控制机制
3. 在关键业务路径上增加日志记录，便于问题追踪

通过这次问题的分析和解决，开发团队不仅修复了当前的功能缺陷，也为未来类似问题的预防和处理积累了宝贵经验。