NextJS 错误：构建项目时未定义组件道具（在开发模式下一切正常）

Question

我有这个组件在开发模式下完全正常，但是在构建它时告诉我open道具undefined即使它工作正常，当我console.log在本地主机上时我得到正确的结果。

const FAQ = ({ faq, index, toggleFAQ }) => {
  return (
    <div
      className={`${Styles.faq} ${faq.open ? Styles.open : ""}`}
      key={index}
      onClick={() => toggleFAQ(index)}>
      <div className={Styles.question}>
        <div className='flex justify-between'>
          <div style={{ width: "90%" }}>
            <span>{faq.question}</span>
          </div>
          <div className='m-auto ml-24'>
            {faq.open ? (
              <img src='faq1.svg' alt='' srcSet='' />
            ) : (
              <img src='faq2.svg' alt='' srcSet='' />
            )}
          </div>
        </div>
      </div>{" "}
      <div className={Styles.answer}>
        <span>{faq.answer}</span>
      </div>
    </div>
  );
};

我传递道具的地方：

const FAQpage = () => {
  const [faqs, setfaqs] = useState([
    {
      question: "1",answer:"2",open: true,
    },
    {
      question: "1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
  ]);

  const toggleFAQ = (index) => {
    setfaqs(
      faqs.map((faq, i) => {
        if (i === index) {
          faq.open = !faq.open;
        } else {
          faq.open = false;
        }

        return faq;
      })
    );
  };

  return (
    <div>
      <h1 className={Styles.title}>FAQ</h1>
      <div className={Styles.faqs}>
        {faqs &&
          faqs.map((faq, i) => (
            <FAQ faq={faq} key={i} index={i} toggleFAQ={toggleFAQ} />
          ))}
      </div>
    </div>
  );
};

运行错误next build：

info - Creating an optimized production build info - Compiled successfully 
info - Collecting page data [= ] info - Generating static pages (0/51) 
Error occurred prerendering page "/components/FAQ". Read more: err.sh/next.js/prerender-error 
TypeError: Cannot read property 'open' of undefined

我不知道这是 NextJS 方面的错误还是什么，我一直在尝试重建项目一段时间，但同样的错误不断出现。我在另一个组件上有同样的错误（基本上与我以相同方式传递道具的概念相同）。任何帮助将不胜感激，谢谢

Answer 1

构建失败，因为pages/文件夹下有组件：

Error occurred prerendering page "/components/FAQ".

Next.js 使用此文件夹结构进行路由，因此其中只能包含页面组件。您需要将组件移出pages/才能解决问题。

Answer 2

我无法仅通过您在此处发布的代码来判断，但是如果您尝试将“getStaticPaths”与“fallback：true”一起使用，则必须添加一个条件来检查是否为isFallback，如下所示：

import { useRouter } from 'next/router'

const App = () => {
  const router = useRouter()

  if (router.isFallback) {
    return <FallbackComponent />
  } else {
    return <MyApp />
  }
}

如果你不想渲染后备组件，你可以使用fallback: "blocking"，如果它不可用，它会SSR你的页面。请注意，如果您的用户（或爬虫）第一次访问页面，则可能需要一段时间才能完全呈现页面（在此期间页面将是空白的，没有交互）。