TypeScript中嵌套Redux容器与展示组件遇错求助

我之前翻了好多相关问题的解决方案，但都解决不了我当前的需求，说不定我在核心逻辑的理解上就有误区。之前参考过两篇相关内容：

• 《Nesting a container component in a presentational component》（Stackoverflow）
• 《Why using nested connect react redux components is good》（Medium）

我的代码示例可在CodeSandbox中查看，标识为43w8vkl554

我的组件嵌套结构如下：

<Provider store={store}>
  {/* 经Redux连接的容器组件（包含props.children） */}
  <Navigation>
    {/* 展示组件 */}
    <Main>
      {/* 经Redux连接的容器组件 */}
      <Counter />
    </Main>
  </Navigation>
</Provider>

这个结构看起来逻辑通顺，但浏览器却抛出了错误提示：

You must pass a component to the function returned by connect. Instead received undefined

错误来自Navigation.tsx。我试着把Counter改成展示组件后就恢复正常了，所以推测要么是TypeScript的类型定义有问题，要么是我的实现方式不支持在已连接组件内部嵌套容器组件的场景。

在CodeSandbox里，错误是在Main组件中组合Counter时出现的，是不是我漏掉了什么类型定义？我不想只在顶层Navigation容器里做一次store连接，更想遵循社区里的相关建议来实现。

补充说明 #

@Tomasz已经帮我解决了这个错误，但我完全搞不懂问题的根源，查了TypeScript模块解析的官方文档也没找到头绪。这会不会和index.js里导出的类型有关？

这个问题的核心原因是循环引用：部分组件在导入过程中被提前加载，导致组件变成了undefined，最终触发了connect的错误提示。解决方法很简单——直接导入目标组件，避免出现循环引用的情况即可。

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