React条件动态导入模块报错：对象不能作为React子元素（found: [object Promise]）

错误原因 #

你当前的写法中WelcomeGuide是一个返回Promise对象的函数，React不支持直接将Promise作为可渲染节点，因此会触发报错。

方案1：使用React内置的React.lazy + Suspense（官方推荐） #

这是React专门为动态导入组件提供的标准实现，写法简洁，符合你的按需加载需求：

import { lazy, Suspense, Fragment } from 'react';
// 注意：show_deprecated_guide的取值逻辑请根据你的实际业务调整
const show_deprecated_guide = '';

// 用React.lazy包裹动态导入逻辑
const WelcomeGuide = lazy(() => 
  import(!show_deprecated_guide ? './guide.js' : './guide-deprecated.js')
);

const WelcomeList = (props) => {
  // 注意：你原代码中的posts变量未定义，请补充对应的取值/请求逻辑
  if (!posts) return <div className="guide-list"><Spinner /></div>;

  return (
    <Fragment>
      {/* 动态导入的组件必须包裹在Suspense中，fallback属性设置加载态UI */}
      <Suspense fallback={<Spinner />}>
        <WelcomeGuide/>
      </Suspense>
    </Fragment>
  )
};

export default WelcomeList;

说明：React.lazy仅支持默认导出的组件，你的guide.js本身就是默认导出，完全适配该方案。

方案2：手动管理加载状态（灵活可控） #

如果需要自定义加载失败兜底、更精细的状态控制，可以用useState+useEffect手动实现动态导入：

import { useState, useEffect, Fragment } from 'react';
const show_deprecated_guide = '';

const WelcomeList = (props) => {
  const [GuideComp, setGuideComp] = useState(null);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState(null);

  useEffect(() => {
    const loadGuideModule = async () => {
      try {
        const module = await import(!show_deprecated_guide ? './guide.js' : './guide-deprecated.js');
        // 把组件实例存到state中
        setGuideComp(() => module.default);
      } catch (err) {
        setLoadError(err);
        console.error('引导组件加载失败：', err);
      } finally {
        setLoading(false);
      }
    }
    loadGuideModule();
  }, []);

  // 加载中/ posts未就绪状态
  if (!posts || loading) return <div className="guide-list"><Spinner /></div>;
  // 加载失败兜底
  if (loadError) return <div>引导组件加载失败，请刷新重试</div>;

  return (
    <Fragment>
      <GuideComp />
    </Fragment>
  )
};

export default WelcomeList;

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