React+Nextjs中如何根据条件实现组件的动态导入？

错误原因 #

你代码里的问题很明确：当isLiveBlog为true时，直接调用import('@path/to/the/component')返回的是Promise对象，而不是可渲染的React组件；但另一个分支用dynamic()返回的是合法的React组件。两种分支返回的类型不匹配，渲染时自然会报“得到的是object而非组件”的错误。

修正方案 #

不管条件如何，都要保证返回的是React组件类型。这里分两种场景处理：

场景1：两种情况都需要动态导入，仅区分是否显示loading组件

如果只是想在非直播博客场景下显示loading占位符，直接统一用dynamic，根据条件配置loading参数即可：

import dynamic from 'next/dynamic';
import ContentPlaceholder from '@path/to/ContentPlaceholder';

const importMyComponent = (isLiveBlog) => ({
  image: dynamic(() => import('@path/to/the/component'), {
    // 直播模式下不显示loading，非直播模式显示占位符
    loading: isLiveBlog ? undefined : ContentPlaceholder,
    // 如果组件是命名导出，要改成下面这种写法：
    // loader: () => import('@path/to/the/component').then(mod => mod.YourNamedComponent)
  }),
});

场景2：直播模式下静态导入组件，非直播模式动态导入

如果直播场景下不需要按需加载，直接静态导入组件，这样它会被打包进主代码块：

import dynamic from 'next/dynamic';
import ContentPlaceholder from '@path/to/ContentPlaceholder';
// 静态导入目标组件
import TargetComponent from '@path/to/the/component';

const importMyComponent = (isLiveBlog) => ({
  image: isLiveBlog 
    ? TargetComponent 
    : dynamic(() => import('@path/to/the/component'), { loading: ContentPlaceholder }),
});

额外注意事项 #

• 检查目标组件的导出方式：如果组件是命名导出（比如export const TargetComponent = () => {}），必须在dynamic的回调里明确指定导出的组件，比如() => import('@path/to/the/component').then(mod => mod.TargetComponent)；如果是默认导出，直接import即可。
• 确保ContentPlaceholder是合法的React组件，能正常渲染。

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