SwiftUI NavigationStack快速API响应时视图跳转异常问题

问题场景 #

使用SwiftUI NavigationStack作为路由组件，流程为：ParentView点击按钮跳转至LoadingView，LoadingView完成API请求后跳转至ProductView。当API响应速度过快时，尽管已向导航路径追加"product"标识，UI仍停留在LoadingView；仅当API耗时≥1秒时，跳转流程才正常。尝试将API请求移至ParentView，或在LoadingView中添加1秒延迟可解决问题，但需明确问题成因及更规范的修复方案。注：因后端限制，必须使用独立LoadingView，不可在同一视图内切换加载状态。

复现代码：

struct MainView: App {
    @StateObject var navigationPath = NavigationPath()

    var body: some Scene {
        NavigationStack(path: $navigationPath) {
            ParentView()
                .navigationDestination(for: String.self) { view in
                    // 快速跳转时此部分代码未被调用
                    switch view {
                    case "parent":
                        ParentView()
                    case "loading":
                        LoadingView() // 加载视图
                    case "product":
                        ProductView() // 目标视图
                    default:
                        EmptyView()
                    }
                }
        }
        .environmentObject(navigationPath)
    }
}

struct ParentView: View {
    @EnvironmentObject var navigationPath: NavigationPath
    var body: some View {
        Button {
            navigationPath.append("loading")
        } label: {
            Text("Go to loading screen")
        }
    }
}

struct LoadingView: View {
    @EnvironmentObject var navigationPath: NavigationPath

    var body: some View {
        ProgressView()
        .task {
            // 此处执行API请求获取数据
            // 取消注释下一行代码则问题消失
            // try? await Task.sleep(until: .now + .seconds(1), clock: .continuous)
            navigationPath.append("product")
        }
    }
}

问题成因 #

核心原因是SwiftUI视图生命周期与NavigationStack路径更新的时机冲突：
当API请求瞬间完成时，LoadingView的.task修饰器会在视图尚未完成渲染挂载到导航栈时触发路径更新。此时NavigationStack还未完成LoadingView的入栈流程，连续的两次路径追加（"loading"→"product"）会被合并处理，导致LoadingView还未完成显示就被标记为要替换，但由于NavigationStack的状态同步存在延迟，最终出现UI停留在LoadingView的状态不一致问题。

规范修复方案 #

方案1：确保LoadingView完成渲染后再执行逻辑 #

利用Task.yield()让当前任务暂停，优先完成视图渲染，再执行API请求和路径更新。修改LoadingView的代码：

struct LoadingView: View {
    @EnvironmentObject var navigationPath: NavigationPath

    var body: some View {
        ProgressView()
            .task {
                // 让出主线程，等待当前视图完成渲染
                await Task.yield()
                
                // 执行API请求
                // HERE we are doing some kind of API call - fetching data
                
                navigationPath.append("product")
            }
    }
}

Task.yield()会让当前异步任务暂停，允许主线程先处理视图渲染等优先级更高的任务，确保NavigationStack完成LoadingView的入栈后，再处理跳转到ProductView的请求。

方案2：使用枚举类型管理路由（更健壮） #

用枚举替代字符串作为路由标识，既提升类型安全性，也能配合渲染等待逻辑避免状态冲突：

1. 定义路由枚举：

enum Route: Hashable {
    case loading
    case product
}

2. 更新MainView的导航配置：

struct MainView: App {
    @StateObject var navigationPath = NavigationPath()

    var body: some Scene {
        NavigationStack(path: $navigationPath) {
            ParentView()
                .navigationDestination(for: Route.self) { route in
                    switch route {
                    case .loading:
                        LoadingView()
                    case .product:
                        ProductView()
                    }
                }
        }
        .environmentObject(navigationPath)
    }
}

3. 修改ParentView和LoadingView的跳转逻辑：

struct ParentView: View {
    @EnvironmentObject var navigationPath: NavigationPath
    var body: some View {
        Button {
            navigationPath.append(Route.loading)
        } label: {
            Text("Go to loading screen")
        }
    }
}

struct LoadingView: View {
    @EnvironmentObject var navigationPath: NavigationPath

    var body: some View {
        ProgressView()
            .task {
                await Task.yield()
                // 执行API请求
                // HERE we are doing some kind of API call - fetching data
                
                navigationPath.append(Route.product)
            }
    }
}

方案3：独立管理子视图跳转状态 #

如果仅涉及LoadingView到ProductView的单层级跳转，可以放弃共享全局NavigationPath，改用navigationDestination(isPresented:)绑定，让LoadingView自行管理跳转状态：

struct LoadingView: View {
    @State private var shouldShowProduct = false

    var body: some View {
        ProgressView()
            .task {
                await Task.yield()
                // 执行API请求
                shouldShowProduct = true
            }
            .navigationDestination(isPresented: $shouldShowProduct) {
                ProductView()
            }
    }
}

这种方式避免了全局路径的状态冲突，逻辑更清晰，适合简单的跳转场景。

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