SwiftUI嵌套NavigationStack后AuthView不显示的问题排查

我有一个作为应用首页的SwiftUI视图，其body代码如下：

@State private var navigationPath = NavigationPath()

var body: some View {
    NavigationStack(path: $navigationPath) {
        VStack {
             // my UI
        }
        .navigationDestination(for: NavigationDestination.self) { destination in
            switch destination {
            case .auth:
                AuthView(navigationPath: navigationPath)
            }
        }
    }
}

其中NavigationDestination是一个私有Hashable枚举。

当我向navigationPath中添加NavigationDestination.auth后，若AuthView未包裹自身的NavigationStack，能正常显示：

var body: some View {
    VStack {
        // my UI
    }
    .navigationBarBackButtonHidden(true)
}

但一旦我用传入的路径将AuthView包裹在自身的NavigationStack中：

var body: some View {
    NavigationStack(path: $navigationStack) {
        VStack {
            // my UI
        }
        .navigationBarBackButtonHidden(true)
        .navigationDestination(for: NavigationDestination.self) { destination in
            switch destination {
            case .signUp:
                SignUpView(navigationPath: navigationPath)
            }
        }
    }
}

（此处的NavigationDestination与首页的枚举不同，同样是私有Hashable枚举）

此时AuthView不再显示，取而代之的是带有黄色三角感叹号的视图。为何给第二个SwiftUI视图添加自身的NavigationStack会阻止导航到它？

移除第二个视图的NavigationStack后一切正常，但无法沿用首页的导航方式。目前我能想到的唯一方案是用根视图统一处理导航，但这对需要扩展的应用并不友好。

核心原因 #

你遇到的问题本质是嵌套NavigationStack时的路径类型冲突：

• 首页的NavigationPath中存储的是首页私有NavigationDestination枚举的实例（.auth）
• 当你把这个路径传递给AuthView并用来初始化它自己的NavigationStack时，AuthView的NavigationStack会尝试解析路径中的元素，但它只认识自己的私有NavigationDestination枚举，无法识别首页的枚举类型，导致导航失败，触发SwiftUI的错误占位视图（黄色感叹号）。

另外，你传递路径的方式也有问题：首页传递的是navigationPath而非绑定（$navigationPath），但即便传递绑定，类型不匹配的问题依然存在。

正确的实现方式 #

要在子视图中沿用类似的导航模式，同时避免冲突，有两种可行方案：

方案1：使用独立的子路径

不要直接复用首页的NavigationPath，给AuthView单独维护自己的NavigationPath，首页只负责导航到AuthView，AuthView内部的导航由自己的路径管理：

// 首页代码调整
.navigationDestination(for: NavigationDestination.self) { destination in
    switch destination {
    case .auth:
        AuthView() // 不再传递首页的路径
    }
}

// AuthView代码
struct AuthView: View {
    @State private var authNavigationPath = NavigationPath() // 独立路径
    
    var body: some View {
        NavigationStack(path: $authNavigationPath) {
            VStack {
                Button("前往注册") {
                    authNavigationPath.append(AuthDestination.signUp)
                }
            }
            .navigationBarBackButtonHidden(true)
            .navigationDestination(for: AuthDestination.self) { destination in
                switch destination {
                case .signUp:
                    SignUpView()
                }
            }
        }
    }
}

// AuthView的私有导航枚举
private enum AuthDestination: Hashable {
    case signUp
}

这种方式让每个视图的导航职责独立，扩展性更强，也避免了类型冲突。

方案2：统一路径类型（适合需要跨视图共享导航状态的场景）

如果需要在多个视图间共享导航状态（比如从注册页直接返回首页），可以定义一个全局的导航枚举，让所有视图都使用这个类型：

// 全局共享的导航枚举（放在公共文件中）
enum AppNavigationDestination: Hashable {
    case auth
    case signUp
    // 后续扩展其他页面
}

// 首页代码
@State private var navigationPath = NavigationPath()

var body: some View {
    NavigationStack(path: $navigationPath) {
        VStack {
            Button("前往登录") {
                navigationPath.append(AppNavigationDestination.auth)
            }
        }
        .navigationDestination(for: AppNavigationDestination.self) { destination in
            switch destination {
            case .auth:
                AuthView(navigationPath: $navigationPath)
            case .signUp:
                SignUpView(navigationPath: $navigationPath)
            }
        }
    }
}

// AuthView代码
struct AuthView: View {
    @Binding var navigationPath: NavigationPath
    
    var body: some View {
        VStack {
            Button("前往注册") {
                navigationPath.append(AppNavigationDestination.signUp)
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

这种方式不需要给子视图嵌套NavigationStack，所有导航逻辑由根NavigationStack统一处理，适合需要全局导航控制的场景。

总结 #

嵌套NavigationStack本身是允许的，但必须保证每个NavigationStack的路径中只包含自己能识别的类型。如果追求视图独立性，优先选择方案1；如果需要全局导航状态共享，选择方案2。

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