Next JS：在生产模式下作为组件的道具传递时，SSG 无法正常工作答案

【问题标题】：Next JS: SSG not working in when passed as prop for a component in production modeNext JS：在生产模式下作为组件的道具传递时，SSG 无法正常工作
【发布时间】：2021-02-10 08:04:58
【问题描述】：

我目前正在处理我的一个项目，当数据作为道具从页面组件传递给子组件时，SSG 不起作用。重现这个问题非常困难，所以我会尽力解释它。

所以我的文件夹结构有点像这样：

└── pages/
    ├── home/
    │   ├── _slider.tsx
    │   └── more .tsx files
    ├── index.tsx
    ├── _app.tsx
    └── _doucment.tsx

index.tsx 是一个页面，而_slider.tsx 是一个由index.tsx 导入的组件。 index.tsx的内容类似如下：

const Home: React.FC<{ sliderData: IsliderData[] }> = (props) => {
  //Refs

  const homeRef = useRef<HTMLDivElement>(null);

  return (
    <div className="home" ref={homeRef}>
      <Nav className="home-nav" ref={homeRef} />
      <Slider data={props.sliderData} />
     
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
 //Fetches data and returns the data as sliderData

  return {
    props: {
      sliderData,
    },
  };
};

_slider.tsx的内容类似如下：

const Slider: React.FC<{ data: IsliderData[] }> = ({ data }) => {
  
  return (
    <div className="slider">
            {data.map((card, index) => (
             <div>The data is used here</div>
            ))}
    </div>
  );
};

现在，所有这些在开发服务器上都可以正常工作，但是一旦我尝试构建应用程序，我就会收到一条错误消息 TypeError: Cannot read property 'map' of undefined，并且此错误指向 _slider.tsx 中包含 data.map 的行

有什么办法可以解决这个问题？

我认为在构建生产版本时，获取的数据没有正确地作为道具传递给子组件。只是我的假设。

非常感谢任何帮助！

【问题讨论】：

除了像@Danila 的回答中提到的那样将您的组件从pages/ 文件夹中分离出来之外，请确保在呈现Slider 组件时检查props.sliderData 是否未定义。

标签： reactjs typescript next.js

【解决方案1】：

pages 目录中的每个文件都是一个页面（_app 和 _document 除外），当您构建应用程序时，NextJs 也将构建 /home/_slider.html（即使您用破折号标记它也是如此Next 无关紧要），但它不能这样做，因为您没有为它提供 data 属性。

如果你想使用某个组件，但不希望它变成一个页面，你需要把它放在/pages之外的其他地方，例如/components目录并从那里导入：

└── components/
    ├── slider.tsx
└── pages/
    ├── home.tsx
    ├── index.tsx
    ├── _app.tsx
    └── _doucment.tsx

【讨论】：