NextJS父传子函数报错：TypeError: setVoiceInput is not a function

在NextJS中尝试从父函数组件向子函数组件传递函数时，出现报错：TypeError: setVoiceInput is not a function。

已确认props命名无错误，但在子组件中执行console.log(setVoiceInput)后发现组件多次渲染，首次输出为函数，后续变为undefined，输出示例：

(function here)
undefined
undefined
(function here)

父组件代码（questionInput.js） #

// questionInput.js
"use client";

import styles from './questionInput.module.css';
import React, {useEffect, useState} from "react";
import Upload from "@/components/upload";
import Voice from "@/components/voice";

const QuestionInput = ({addToInputList, addToResponseList}) => {

    const [question, setQuestion] = useState("");

    const setVoiceInput = (voice) => {
        setQuestion(voice)
    }

    const handleChange = (event) => {
        setQuestion(event.target.value);
    };

    const addInput = (input) => {
        addToInputList(input);

    };

    const addResponse = (response) => {
        addToResponseList(response);
    }


    const handleSubmit = async (event) => {
        event.preventDefault();

        addInput(question)

        const fetchData = async () => {
            try {
                const url = "/api/ask-gpt";
                const response = await fetch(url, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({question}),
                });

                if (!response.ok) {
                    throw new Error("Request failed with status: " + response.status);
                }


                const data = await response.json();
                addResponse(data)

            } catch (error) {
                console.error("Error fetching data:", error);

            }
        };

        await fetchData();

        setQuestion("");
    };


    return (
        <div className={styles.main}>

            <Upload/>
            <Voice setVoiceInput={setVoiceInput}/>

            <form id={'csv-input'} onSubmit={handleSubmit} className={styles.container}>
                <input type="text" value={question} onChange={handleChange}
                       placeholder="Ask a question about your CSV." className={styles.input}/>
            </form>
        </div>
    );
};

export default QuestionInput;

子组件代码（voice.js） #

// voice.js
"use client"

import 'regenerator-runtime/runtime'
import React, {useEffect, useState} from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const Voice = ({setVoiceInput}) => {
    console.log('test')

    const [speechRecognitionSupported, setSpeechRecognitionSupported] = useState(null)

    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    useEffect(() => {
        setSpeechRecognitionSupported(browserSupportsSpeechRecognition)
    }, [browserSupportsSpeechRecognition])


    useEffect(() => {
        setVoiceInput(transcript);
    }, [transcript, setVoiceInput, browserSupportsSpeechRecognition])


    if (speechRecognitionSupported === null) return null

    if (!speechRecognitionSupported) {
        return <span>Browser does not support speech recognition.</span>
    }



    return (
        <div>
            <p>Microphone: {listening ? 'on' : 'off'}</p>
            <button onClick={SpeechRecognition.startListening}>Start</button>
            <button onClick={SpeechRecognition.stopListening}>Stop</button>
            <button onClick={resetTranscript}>Reset</button>
        </div>
    );
};
export default Voice;

排查后发现是意外在项目其他位置调用了Voice组件，但未传递setVoiceInput props，导致部分组件渲染实例中该参数为undefined，触发报错。

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