使用URLSearchParams提取Query Params时返回[object Object]报错求助

核心问题分析 #

返回[object Object]通常是因为你直接把一个错误对象当成字符串拼接了，大概率是接口请求参数异常、未处理错误，或者返回值格式处理不当导致的。下面是具体排查点和修复方案：

1. 补全useEffect依赖，确保参数就绪后再发起请求 #

你的useEffect依赖数组是空的，在Gatsby这类SSR框架中，客户端hydrate阶段才会拿到window对象获取参数，组件初始化时dt和ut可能还未赋值，导致请求时参数为undefined，触发接口错误。

修复：把dt和ut加入useEffect的依赖数组，并先做非空校验：

useEffect(() => {
  // 参数不存在时直接返回，避免无效请求
  if (!dt || !ut) return;
  
  const fetchData = async () => {
    // ...后续请求逻辑
  }
  fetchData()
}, [dt, ut]) // 加入依赖，确保参数更新后重新请求

2. 增加错误捕获，明确接口错误详情 #

当前代码未处理异步请求的错误，接口返回错误对象时，直接拼接就会变成[object Object]。需要用try/catch捕获错误，打印具体信息定位问题。

3. 处理URL参数为null的情况 #

URLSearchParams.get()找不到对应参数时会返回null，直接传给接口会导致请求参数异常，必须先做非空判断。

4. 确认getContract的返回值格式 #

如果getContract是用axios等库封装的，它可能返回包含data属性的响应对象，而非直接的文件路径字符串，需要取result.data而非result。

完整修复后的代码 #

import React, { ReactElement, useEffect, useState } from 'react'
import Viewer from './Viewer/Viewer'
import getContract from '../../services/getContract'

const ContractView = (): ReactElement => {
  const [contractFile, setContractFile] = useState<string>('')

  let dt: string | null = null
  let ut: string | null = null

  if (typeof window !== `undefined`) {
    const urlParams = new URLSearchParams(window.location.search)
    dt = urlParams.get('dt')
    ut = urlParams.get('ut')
  }

  useEffect(() => {
    if (!dt || !ut) return;

    const fetchData = async () => {
      try {
        const result = await getContract({
          document: dt,
          usage: ut,
        })
        // 根据getContract的实际返回格式调整，比如axios响应取result.data
        const filePath = typeof result === 'object' ? result.data : result;
        if (filePath) {
          setContractFile(`${process.env.GATSBY_API_URL}/${filePath}`)
        }
      } catch (error) {
        console.error('获取合同文件失败:', error) // 打印错误详情
      }
    }
    fetchData()
  }, [dt, ut])

  return <Viewer pdfFile={contractFile} />
}

export default ContractView

额外排查建议 #

• 打开浏览器控制台Network面板，查看getContract请求的参数是否正确传递
• 检查接口返回的具体内容，确认是错误信息还是格式不符合预期
• 查看getContract的封装代码，确认它的返回值是直接的文件路径，还是需要解析的响应对象

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