Next.js能否使用异步工厂函数？调用返回方法报类型错误

Next.js 对普通 JavaScript/TypeScript 的工厂函数写法没有任何限制，完全支持异步工厂函数的使用。你遇到的类型报错和 Next.js 框架本身无关，是异步函数的调用方式错误导致的。

你定义的factory是被async标记的异步函数，它的返回值类型是Promise<{ validateAmount: ..., validateMessage: ... }>，也就是说你必须等待这个 Promise 执行完成，才能拿到包含所有校验方法的对象。
从报错信息可以看出，你当前的代码是直接在factory函数本身上访问validateAmount属性——factory本身是个函数，不是它执行后的返回结果，自然找不到对应的属性。
你当前的错误调用逻辑大概是这样的：

// 错误示例
import { factory } from './validator'
// 直接在工厂函数对象上访问方法，没有执行函数、等待异步结果
const errorMsg = factory.validateAmount(inputValue)

根据你的使用场景选择对应方案即可：

• 方案1：在异步上下文中正确调用工厂函数
  如果你是在客户端组件的表单提交事件、useEffect，或者服务端组件、路由处理逻辑中使用校验方法，需要先await执行工厂函数，拿到校验器集合后再调用对应方法：

  import { factory } from './validator'
  
  const onFormSubmit = async (formValues) => {
    // 先执行异步工厂，等待接口数据拉取完成，拿到所有校验方法
    const validators = await factory()
    // 再调用对应校验逻辑
    const amountErr = validators.validateAmount(formValues.amount)
    const messageErr = validators.validateMessage(formValues.message)
    // 后续表单处理逻辑
  }
  

  注意不要每次校验单个字段都重新调用一次factory()，否则会重复触发接口请求。建议在表单初始化、组件挂载阶段就调用一次工厂，把返回的validators存下来复用。

• 方案2：模块加载时提前初始化校验器
  如果getData()拉取的配置类数据不会频繁变动，可以在模块加载时就执行一次工厂初始化，避免重复拉取数据：
  先在工厂文件中新增导出：

  // 保留你原有的factory函数代码不变，新增下面这行
  export const validators = factory()
  

  使用时直接等待这个提前初始化的Promise即可：

  import { validators } from './validator'
  
  const onFormSubmit = async (formValues) => {
    const validatorSet = await validators
    const amountErr = validatorSet.validateAmount(formValues.amount)
  }
  

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