NextJS中如何用useSearchParams正确初始化状态变量？

问题根源 #

1. 缺少客户端组件标识：Next.js App Router里，useSearchParams是客户端专属Hook，必须在标记了'use client'的组件里使用。你的组件默认是服务器组件，执行时拿不到客户端URL的查询参数，所以searchParams.get("author")返回undefined，最终用了默认值"abc"。
2. 违反Hook调用规则：你在useState的初始值里直接调用useSearchParams，这不符合React Hooks的规范——Hook只能在组件顶层或者自定义Hook的顶层调用，不能嵌套在其他Hook的参数里，否则会打乱Hook的执行顺序，导致异常。

解决方法 #

方案1：直接展示参数（不需要维护状态）

如果只是展示author的值，不用后续修改，直接在客户端组件顶层获取参数就行，完全没延迟：

'use client'; // 必须加这行，标记为客户端组件
import React from 'react';
import { useSearchParams } from 'next/navigation';

function MyComponent() {
    const searchParams = useSearchParams();
    const author = searchParams.get('author') || 'abc';

    return (
        <div>
            <h1>Search Results for: {author}</h1>
        </div>
    );
}

export default MyComponent;

方案2：需要维护状态时的无闪烁处理

如果要把author存在状态里（比如后面要修改它），可以先在组件顶层拿到初始参数值，作为useState的初始值，再用useEffect监听参数变化，保证URL参数更新时状态同步：

'use client';
import React, { useState, useEffect } from "react";
import { useSearchParams } from 'next/navigation';

function MyComponent() {
    const searchParams = useSearchParams();
    // 顶层获取初始参数，作为state的初始值
    const initialAuthor = searchParams.get('author') || 'abc';
    const [author, setAuthor] = useState(initialAuthor);

    // 监听URL参数变化，同步更新状态
    useEffect(() => {
        const newAuthor = searchParams.get('author') || 'abc';
        if (newAuthor !== author) {
            setAuthor(newAuthor);
        }
    }, [searchParams, author]);

    return (
        <div>
            <h1>Search Results for: {author}</h1>
            {/* 例子：可以修改状态 */}
            <button onClick={() => setAuthor('Alice')}>Change Author</button>
        </div>
    );
}

export default MyComponent;

这样初始渲染就能直接显示正确的author值，不会有闪烁问题，同时也能处理URL参数更新的情况。

内容的提问来源于stack exchange，提问作者S-Ahmed