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

Posted 2023-02-22

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

【英文标题】：NextJS bug: Component props are undefined when building the project (everything works fine on dev mode)

【发布时间】：2021-04-12 10:15:46

【问题描述】：

我有这个组件在开发模式下完全可以正常工作，但是在构建它时告诉我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 方面的错误还是什么，我一直在尝试重建项目一段时间，但同样的错误不断出现。我在另一个组件上遇到了同样的错误（基本上与我以相同方式传递道具的概念相同）。任何帮助将不胜感激，谢谢

【问题讨论】：

在运行next build 时是否遇到错误？您能否添加您遇到的具体错误？

我在运行 npm run build 时得到它，这是下一个构建

信息 - 创建优化的生产构建信息 - 编译成功信息 - 收集页面数据 [= ] 信息 - 生成静态页面 (0/51) 预渲染页面“/components/FAQ”时出错。阅读更多：err.sh/next.js/prerender-error TypeError: Cannot read property 'open' of undefined

这能回答你的问题吗？ Can't build React/Next project - found page without a React Component as default export (context api file)

【参考方案1】：

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

import  useRouter  from 'next/router'

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

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

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

【参考方案2】：

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

Error occurred prerendering page "/components/FAQ".

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