Next.js中useContext传入getServerSideProps报错：Cannot read properties of null

核心错误原因 #

getServerSideProps 是服务器端执行的函数，而 useContext 是React客户端Hook，仅能在React组件的渲染周期内使用。两者运行环境完全隔离，直接在getServerSideProps中调用useContext必然触发错误——服务器端不存在React上下文，所以会出现Cannot read properties of null (reading 'useContext')。

正确实现思路 #

要将客户端输入的搜索关键词传递给服务器端的API调用，需通过URL查询参数完成，而非Context。具体步骤如下：

1. 修改SearchLine.tsx：跳转时携带搜索参数

将原来通过Context存储关键词的逻辑，改为跳转至/search-results时，把关键词拼接到URL的query参数中：

import { useState } from 'react';
import { useRouter } from 'next/router';

const SearchLine = () => {
  const [inputVal, setInputVal] = useState('');
  const router = useRouter();

  const handleSubmit = () => {
    if (!inputVal.trim()) return;
    // 编码关键词后拼接至URL
    router.push(`/search-results?searchWord=${encodeURIComponent(inputVal)}`);
  };

  return (
    <div className="search-line">
      <input
        type="text"
        value={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        placeholder="输入关键词搜索"
      />
      <button onClick={handleSubmit}>搜索</button>
    </div>
  );
};

export default SearchLine;

2. 修改/search-results页面：从query参数获取关键词并调用API

在getServerSideProps中直接从context.query提取关键词，再执行API调用：

export async function getServerSideProps(context) {
  // 从URL query中获取搜索关键词
  const { searchWord } = context.query;

  // 无关键词时重定向至首页
  if (!searchWord) {
    return {
      redirect: { destination: '/', permanent: false },
    };
  }

  // 调用API，传入编码后的关键词
  const apiRes = await fetch(
    `https://your-api-domain.com/search?keyword=${encodeURIComponent(searchWord)}`
  );
  const searchData = await apiRes.json();

  return { props: { searchData } };
}

const SearchResults = ({ searchData }) => {
  return (
    <div className="search-results">
      <h2>搜索结果（共{searchData.length}条）</h2>
      <ul>
        {searchData.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchResults;

3. 检查_app.tsx的Provider配置（若仍需客户端使用Context）

如果只是服务器端调用API不需要Context，但客户端仍需使用searchWord，确保Provider正确包裹整个应用即可：

import { SearchProvider } from '../contexts/SearchContext';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <SearchProvider>
      <Component {...pageProps} />
    </SearchProvider>
  );
}

export default MyApp;

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