Next.js应用开发模式正常，构建生产版本时出现filter未定义错误

问题原因 #

开发模式正常但生产构建报错，核心是**answers在生产环境下的初始值不是数组（可能是undefined或null）**。开发阶段的mock数据、本地缓存或数据加载时机差异，让answers始终保持数组状态，但生产环境中组件渲染时answers可能还未完成赋值，调用filter方法就会触发“filter未定义”错误。

修复方案 #

方案1：解构时设置默认空数组 #

在解构useQuiz返回值时，给questions和answers加上默认空数组，确保即使返回值中没有这两个字段，也不会出现非数组类型：

const { questions = [], answers = [] } = useQuiz();
const correctAnswersCount = answers.filter((answer, index) => answer === questions[index].correct).length;

方案2：使用可选链+默认值兜底 #

如果无法保证useQuiz始终返回数组，用可选链操作符?.避免调用undefined的方法，同时给filter结果加默认空数组兜底：

const { questions, answers } = useQuiz();
const correctAnswersCount = (answers?.filter((answer, index) => answer === questions[index].correct) || []).length;

方案3：检查useQuiz的实现 #

确保useQuiz的状态初始化和数据更新逻辑中，answers始终保持数组类型：

• 初始状态设为[]，比如const [answers, setAnswers] = useState([]);
• 异步加载数据时，即使无数据也返回空数组，不要设置为null或undefined

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