这是Next.js的设计。

• 任何路由段都可以选择定义自己的布局。这些布局将在该段中的所有页面之间共享。
• 默认情况下，路由中的布局是嵌套的。每个父布局都使用React children prop将其下的子布局 Package 起来。

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
所以如果你有一个app/parent/layout.tsx和app/parent/child/layout.tsx：

• 当您访问/parent时，将仅应用parent/layout.tsx
• 当您访问/parent/child时，两种布局都将被应用，parent/layout.tsx包裹parent/child/layout.tsx

你可以在这里阅读更多关于这种行为的信息：https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts

我认为一个好的解决方案是从父路由中删除loading.tsx，然后添加一个挂起，并使用一个加载器作为后备，如下所示

function page() {
  return (
    <div>
      <h1>Welcome</h1>
     <Suspense fallback={<Loading />}>
       <Main />
     </Suspense>
   </div>
 );
}

字符串
在这里，页面的主要部分（所有Nextjs的数据获取逻辑）可以进入Main，Nextjs将在数据可用时立即流式传输组件，这样，子路由将不再继承任何loading.tsx，并且可能使用自己专用的loading.tsx